From aeab2840de0c69122c49dba1b6f286597e4d606a Mon Sep 17 00:00:00 2001
From: Tam Nhu Tran <kaitran.ntt@gmail.com>
Date: Thu, 26 Mar 2026 15:31:24 -0400
Subject: [PATCH] fix(ui): constrain bounded code editor scroll viewports

---
 .../cliproxy/provider-editor/index.tsx        |  6 ++--
 ui/src/components/profiles/editor/index.tsx   |  6 ++--
 ui/src/components/shared/code-editor.tsx      |  9 ++++--
 ui/src/index.css                              | 32 +++++++++++++++++++
 ui/src/pages/api.tsx                          |  2 +-
 5 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/ui/src/components/cliproxy/provider-editor/index.tsx b/ui/src/components/cliproxy/provider-editor/index.tsx
index 502b8583..55d858f0 100644
--- a/ui/src/components/cliproxy/provider-editor/index.tsx
+++ b/ui/src/components/cliproxy/provider-editor/index.tsx
@@ -234,8 +234,8 @@ export function ProviderEditor({
           <span className="ml-3 text-muted-foreground">Loading settings...</span>
         </div>
       ) : (
-        <div className="flex-1 grid grid-cols-[40%_60%] divide-x overflow-hidden">
-          <div className="flex flex-col overflow-hidden bg-muted/5">
+        <div className="min-h-0 flex-1 grid grid-cols-[40%_60%] divide-x overflow-hidden">
+          <div className="flex min-h-0 min-w-0 flex-col overflow-hidden bg-muted/5">
             <Tabs defaultValue="config" className="h-full flex flex-col">
               <div className="px-4 pt-4 shrink-0">
                 <TabsList className="w-full">
@@ -303,7 +303,7 @@ export function ProviderEditor({
             </Tabs>
           </div>
 
-          <div className="flex flex-col overflow-hidden">
+          <div className="flex min-h-0 min-w-0 flex-col overflow-hidden">
             <div className="px-6 py-2 bg-muted/30 border-b flex items-center gap-2 shrink-0 h-[45px]">
               <Code2 className="w-4 h-4 text-muted-foreground" />
               <span className="text-sm font-medium text-muted-foreground">
diff --git a/ui/src/components/profiles/editor/index.tsx b/ui/src/components/profiles/editor/index.tsx
index d13c4353..f9709845 100644
--- a/ui/src/components/profiles/editor/index.tsx
+++ b/ui/src/components/profiles/editor/index.tsx
@@ -226,8 +226,8 @@ export function ProfileEditor({
           </div>
         </div>
       ) : (
-        <div className="flex-1 grid grid-cols-[40%_60%] divide-x overflow-hidden">
-          <div className="flex flex-col overflow-hidden bg-muted/5 min-w-0">
+        <div className="min-h-0 flex-1 grid grid-cols-[40%_60%] divide-x overflow-hidden">
+          <div className="flex min-h-0 min-w-0 flex-col overflow-hidden bg-muted/5">
             <FriendlyUISection
               profileName={profileName}
               target={resolvedTarget}
@@ -242,7 +242,7 @@ export function ProfileEditor({
               onAddEnvVar={addNewEnvVar}
             />
           </div>
-          <div className="flex flex-col overflow-hidden">
+          <div className="flex min-h-0 min-w-0 flex-col overflow-hidden">
             <div className="px-6 py-2 bg-muted/30 border-b flex items-center gap-2 shrink-0 h-[45px]">
               <Code2 className="w-4 h-4 text-muted-foreground" />
               <span className="text-sm font-medium text-muted-foreground">
diff --git a/ui/src/components/shared/code-editor.tsx b/ui/src/components/shared/code-editor.tsx
index e1dd049e..5dbc3fd4 100644
--- a/ui/src/components/shared/code-editor.tsx
+++ b/ui/src/components/shared/code-editor.tsx
@@ -156,12 +156,16 @@ export function CodeEditor({
   );
 
   return (
-    <div className={cn('flex min-h-0 flex-col', className)}>
+    <div
+      className={cn('flex min-h-0 flex-col', isFillParent && 'h-full', className)}
+      style={isFillParent ? { height: minHeight === 'auto' ? undefined : minHeight } : undefined}
+    >
       {/* Editor container */}
       <div
         className={cn(
           'relative rounded-md border overflow-hidden',
           'bg-muted/30',
+          isFillParent && 'flex min-h-0 flex-1 flex-col',
           isFocused && 'ring-2 ring-ring ring-offset-2 ring-offset-background',
           readonly && 'opacity-70 cursor-not-allowed',
           !validation.valid && 'border-destructive'
@@ -169,8 +173,7 @@ export function CodeEditor({
         data-slot="code-editor-surface"
       >
         <div
-          className={cn(isFillParent && 'min-h-0 overflow-auto')}
-          style={isFillParent ? { height: minHeight === 'auto' ? '100%' : minHeight } : undefined}
+          className={cn(isFillParent && 'scrollbar-editor min-h-0 flex-1 overflow-auto')}
           data-slot={isFillParent ? 'code-editor-viewport' : undefined}
         >
           <Editor
diff --git a/ui/src/index.css b/ui/src/index.css
index 1e0a0d23..b15fdb8e 100644
--- a/ui/src/index.css
+++ b/ui/src/index.css
@@ -342,3 +342,35 @@
 .scrollbar-thin::-webkit-scrollbar-thumb:hover {
   background: var(--muted-foreground);
 }
+
+.scrollbar-editor {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
+  scrollbar-gutter: stable;
+}
+
+.scrollbar-editor::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.scrollbar-editor::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.scrollbar-editor::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border: 2px solid transparent;
+  border-radius: 9999px;
+  background-clip: content-box;
+  min-height: 32px;
+}
+
+.scrollbar-editor::-webkit-scrollbar-thumb:hover {
+  background: var(--muted-foreground);
+  background-clip: content-box;
+}
+
+.scrollbar-editor::-webkit-scrollbar-corner {
+  background: transparent;
+}
diff --git a/ui/src/pages/api.tsx b/ui/src/pages/api.tsx
index 2267a659..2a653f87 100644
--- a/ui/src/pages/api.tsx
+++ b/ui/src/pages/api.tsx
@@ -354,7 +354,7 @@ export function ApiPage() {
           />
         </div>
 
-        <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
+        <div className="flex min-h-0 flex-1 flex-col min-w-0 overflow-hidden">
           {selectedProfileData ? (
             <>
               <div className="px-4 py-2 border-b bg-background flex items-center justify-end gap-2">