fix: schema popup window clipping (#4075)

Fixes #4033 BEFORE: ![Screenshot 2025-01-16 at 2 55 29 PM](https://github.com/user-attachments/assets/1e515072-c022-4980-869e-66ba67a9abcf) AFTER: ![Screenshot 2025-01-16 at 2 55 16 PM](https://github.com/user-attachments/assets/ea4e2a1b-221e-4366-a358-3eccbf805174)
block · Jan 16, 2025 · cac8d58 · cac8d58
1 parent 275cf7f
commit cac8d58
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 16 deletions.
diff --git a/examples/go/echo/types.ftl.go b/examples/go/echo/types.ftl.go
diff --git a/frontend/console/src/components/ResizablePanels.tsx b/frontend/console/src/components/ResizablePanels.tsx
@@ -93,7 +93,7 @@ export const ResizablePanels: React.FC<ResizablePanelsProps> = ({
             width: `${rightPanelWidth}px`,
             maxHeight: bottomPanelContent ? `calc(100vh - ${bottomPanelHeight + TOP_BAR_HEIGHT}px)` : '100vh',
           }}
-          className='flex flex-col h-full overflow-y-scroll'
+          className='flex flex-col h-full overflow-y-scroll overflow-x-visible'
         >
           <RightPanel header={rightPanelHeader} panels={rightPanelPanels} />
         </div>

diff --git a/frontend/console/src/features/modules/ModulePanel.tsx b/frontend/console/src/features/modules/ModulePanel.tsx
@@ -22,7 +22,7 @@ export const ModulePanel = () => {
   if (!module) return
 
   return (
-    <div ref={ref} className='mt-4 mx-4'>
+    <div ref={ref} className='mt-4 mx-4 h-full'>
       <Schema schema={module.schema} />
     </div>
   )

diff --git a/frontend/console/src/features/modules/ModulesPage.tsx b/frontend/console/src/features/modules/ModulesPage.tsx
@@ -17,11 +17,13 @@ export const ModulesPage = ({ body }: { body: React.ReactNode }) => {
   }
 
   return (
-    <ResizableHorizontalPanels
-      leftPanelContent={<ModulesTree modules={tree} />}
-      rightPanelContent={body}
-      leftPanelWidth={treeWidth}
-      setLeftPanelWidth={setTreeWidthWithLS}
-    />
+    <div className='h-full'>
+      <ResizableHorizontalPanels
+        leftPanelContent={<ModulesTree modules={tree} />}
+        rightPanelContent={body}
+        leftPanelWidth={treeWidth}
+        setLeftPanelWidth={setTreeWidthWithLS}
+      />
+    </div>
   )
 }
diff --git a/frontend/console/src/features/modules/schema/Schema.tsx b/frontend/console/src/features/modules/schema/Schema.tsx
@@ -125,7 +125,7 @@ export const Schema = ({ schema, moduleName, containerRect }: { schema: string;
     </div>
   ))
   return (
-    <div className='overflow-x-auto'>
+    <div className='overflow-x-auto h-full'>
       <div className='whitespace-pre font-mono text-xs'>{lines}</div>
     </div>
   )