From b618cf661b6bc16dfdcb53e7d9f876514135ba13 Mon Sep 17 00:00:00 2001
From: "Manav.Shrivastava" <manavshrivastava@hotmail.com>
Date: Thu, 30 Jul 2026 17:26:15 +0530
Subject: [PATCH] Fix display scaling scroll issue in connector integration and
 other views

Add min-h-0 to <main> elements across surface views to fix CSS grid
overflow clipping at non-default display scales.

Root cause: the .app grid's <main> items had default min-height: auto,
causing them to grow beyond the viewport when content was tall (e.g.,
increased display scaling). Since .app has overflow: hidden, the
overflow was silently clipped with no scrollbar. Adding min-h-0
(min-height: 0) allows grid items to shrink below their intrinsic
content height, letting the inner overflow-y-auto div properly
constrain and scroll.

Fixes andrewyng/openworker#321
---
 surfaces/gui/src/components/AuditView.tsx        | 2 +-
 surfaces/gui/src/components/InboxView.tsx        | 2 +-
 surfaces/gui/src/components/IntegrationsView.tsx | 2 +-
 surfaces/gui/src/components/ScheduledView.tsx    | 2 +-
 surfaces/gui/src/components/SettingsView.tsx     | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/surfaces/gui/src/components/AuditView.tsx b/surfaces/gui/src/components/AuditView.tsx
index 02f4dcd0..7e8b2424 100644
--- a/surfaces/gui/src/components/AuditView.tsx
+++ b/surfaces/gui/src/components/AuditView.tsx
@@ -30,7 +30,7 @@ export function AuditView() {
   }, []);
 
   return (
-    <main className="flex-1 min-w-0 flex bg-paper">
+    <main className="flex-1 min-w-0 min-h-0 flex bg-paper">
       <div className="flex-1 min-w-0 overflow-y-auto hairline-scroll">
         <div className="max-w-4xl mx-auto px-7 py-6">
           <PanelHead
diff --git a/surfaces/gui/src/components/InboxView.tsx b/surfaces/gui/src/components/InboxView.tsx
index 896f0cb7..4fb70e48 100644
--- a/surfaces/gui/src/components/InboxView.tsx
+++ b/surfaces/gui/src/components/InboxView.tsx
@@ -141,7 +141,7 @@ export function InboxView({
   const routingLabel = routingName ? `#${routingName}` : routing;
 
   return (
-    <main className="flex-1 min-w-0 flex bg-paper">
+    <main className="flex-1 min-w-0 min-h-0 flex bg-paper">
       <div className="flex-1 min-w-0 overflow-y-auto hairline-scroll">
         <div className="max-w-4xl mx-auto px-7 py-6">
           <PanelHead
diff --git a/surfaces/gui/src/components/IntegrationsView.tsx b/surfaces/gui/src/components/IntegrationsView.tsx
index d1674b3f..58ea2ed4 100644
--- a/surfaces/gui/src/components/IntegrationsView.tsx
+++ b/surfaces/gui/src/components/IntegrationsView.tsx
@@ -33,7 +33,7 @@ export function IntegrationsView() {
   }, []);
 
   return (
-    <main className="flex-1 min-w-0 flex bg-paper">
+    <main className="flex-1 min-w-0 min-h-0 flex bg-paper">
       <nav className="page-subnav w-[208px] shrink-0 border-r border-line bg-panel/40 px-3 py-4">
         <div className="px-2 text-[13.5px] font-semibold mb-3 flex items-center gap-2">
           <Icon name="plug" size={16} /> Connectors
diff --git a/surfaces/gui/src/components/ScheduledView.tsx b/surfaces/gui/src/components/ScheduledView.tsx
index 6c557349..4a1364dc 100644
--- a/surfaces/gui/src/components/ScheduledView.tsx
+++ b/surfaces/gui/src/components/ScheduledView.tsx
@@ -42,7 +42,7 @@ function toCron(time: string, freq: string): string {
 // The §28 page shell: full-bleed main, centered ≤4xl column — same as Connectors/Activity/Inbox.
 function Shell({ children }: { children: React.ReactNode }) {
   return (
-    <main className="flex-1 min-w-0 flex bg-paper">
+    <main className="flex-1 min-w-0 min-h-0 flex bg-paper">
       <div className="flex-1 min-w-0 overflow-y-auto hairline-scroll">
         <div className="max-w-4xl mx-auto px-7 py-6">{children}</div>
       </div>
diff --git a/surfaces/gui/src/components/SettingsView.tsx b/surfaces/gui/src/components/SettingsView.tsx
index 5b88cc84..6e2698d1 100644
--- a/surfaces/gui/src/components/SettingsView.tsx
+++ b/surfaces/gui/src/components/SettingsView.tsx
@@ -81,7 +81,7 @@ export function SettingsView({
   const [tab, setTab] = useState<SetTab>(wanted);
 
   return (
-    <main className="flex-1 min-w-0 flex bg-paper">
+    <main className="flex-1 min-w-0 min-h-0 flex bg-paper">
       <nav className="page-subnav w-[208px] shrink-0 border-r border-line bg-panel/40 px-3 py-4">
         <div className="px-2 text-[13.5px] font-semibold mb-3 flex items-center gap-2">
           <Icon name="gear" size={16} /> Settings