From cac8d5873803176926e010ec45b31cac0724cc4f Mon Sep 17 00:00:00 2001
From: Wes <wesbillman@users.noreply.github.com>
Date: Thu, 16 Jan 2025 15:28:13 -0700
Subject: [PATCH] fix: schema popup window clipping (#4075)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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)
---
 examples/go/echo/types.ftl.go                      | 14 +++++++-------
 .../console/src/components/ResizablePanels.tsx     |  2 +-
 .../console/src/features/modules/ModulePanel.tsx   |  2 +-
 .../console/src/features/modules/ModulesPage.tsx   | 14 ++++++++------
 .../console/src/features/modules/schema/Schema.tsx |  2 +-
 5 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/examples/go/echo/types.ftl.go b/examples/go/echo/types.ftl.go
index 8376724272..a50ac05394 100644
--- a/examples/go/echo/types.ftl.go
+++ b/examples/go/echo/types.ftl.go
@@ -2,10 +2,10 @@
 package echo
 
 import (
-    "context"
-    "github.com/block/ftl/common/reflection"
-    "github.com/block/ftl/go-runtime/server"
-    ftltime "ftl/time"
+	"context"
+	ftltime "ftl/time"
+	"github.com/block/ftl/common/reflection"
+	"github.com/block/ftl/go-runtime/server"
 )
 
 type EchoClient func(context.Context, EchoRequest) (EchoResponse, error)
@@ -13,9 +13,9 @@ type EchoClient func(context.Context, EchoRequest) (EchoResponse, error)
 func init() {
 	reflection.Register(
 		reflection.ProvideResourcesForVerb(
-            Echo,
-            server.VerbClient[ftltime.TimeClient, ftltime.TimeRequest, ftltime.TimeResponse](),
+			Echo,
+			server.VerbClient[ftltime.TimeClient, ftltime.TimeRequest, ftltime.TimeResponse](),
 			server.Config[string]("echo", "default"),
 		),
 	)
-}
\ No newline at end of file
+}
diff --git a/frontend/console/src/components/ResizablePanels.tsx b/frontend/console/src/components/ResizablePanels.tsx
index 1c71150dd0..2fad0be189 100644
--- 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
index cdd13c826d..10def86961 100644
--- 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
index da8e8b075a..19803ee9a0 100644
--- 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
index b2772f50c1..63c0197d25 100644
--- 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>
   )