From 2753cbed97b8090b45ca9cb359816c816ddaae59 Mon Sep 17 00:00:00 2001
From: yangdx <yangdx@znipower.com>
Date: Mon, 17 Mar 2025 05:00:32 +0800
Subject: [PATCH] Fix overflow issues in UI components

- Set overflow-hidden for main container
- Add overflow-auto to documents tab
- Add overflow-hidden to graph and retrieval tabs
- Set overflow-hidden for SigmaContainer
- Set overflow-hidden for retrieval testing container
---
 lightrag_webui/src/App.tsx                       | 12 ++++++------
 lightrag_webui/src/features/GraphViewer.tsx      |  2 +-
 lightrag_webui/src/features/RetrievalTesting.tsx |  2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/lightrag_webui/src/App.tsx b/lightrag_webui/src/App.tsx
index b7d66b7e..8bb9517a 100644
--- a/lightrag_webui/src/App.tsx
+++ b/lightrag_webui/src/App.tsx
@@ -56,24 +56,24 @@ function App() {
   return (
     <ThemeProvider>
       <TabVisibilityProvider>
-        <main className="flex h-screen w-screen overflow-x-hidden">
+        <main className="flex h-screen w-screen overflow-hidden">
           <Tabs
             defaultValue={currentTab}
-            className="!m-0 flex grow flex-col !p-0"
+            className="!m-0 flex grow flex-col !p-0 overflow-hidden"
             onValueChange={handleTabChange}
           >
             <SiteHeader />
             <div className="relative grow">
-              <TabsContent value="documents" className="absolute top-0 right-0 bottom-0 left-0">
+              <TabsContent value="documents" className="absolute top-0 right-0 bottom-0 left-0 overflow-auto">
                 <DocumentManager />
               </TabsContent>
-              <TabsContent value="knowledge-graph" className="absolute top-0 right-0 bottom-0 left-0">
+              <TabsContent value="knowledge-graph" className="absolute top-0 right-0 bottom-0 left-0 overflow-hidden">
                 <GraphViewer />
               </TabsContent>
-              <TabsContent value="retrieval" className="absolute top-0 right-0 bottom-0 left-0">
+              <TabsContent value="retrieval" className="absolute top-0 right-0 bottom-0 left-0 overflow-hidden">
                 <RetrievalTesting />
               </TabsContent>
-              <TabsContent value="api" className="absolute top-0 right-0 bottom-0 left-0">
+              <TabsContent value="api" className="absolute top-0 right-0 bottom-0 left-0 overflow-hidden">
                 <ApiSite />
               </TabsContent>
             </div>
diff --git a/lightrag_webui/src/features/GraphViewer.tsx b/lightrag_webui/src/features/GraphViewer.tsx
index b9404ca3..819d9625 100644
--- a/lightrag_webui/src/features/GraphViewer.tsx
+++ b/lightrag_webui/src/features/GraphViewer.tsx
@@ -182,7 +182,7 @@ const GraphViewer = () => {
 
   // Always render SigmaContainer but control its visibility with CSS
   return (
-    <div className="relative h-full w-full">
+    <div className="relative h-full w-full overflow-hidden">
       <SigmaContainer
         settings={sigmaSettings}
         className="!bg-background !size-full overflow-hidden"
diff --git a/lightrag_webui/src/features/RetrievalTesting.tsx b/lightrag_webui/src/features/RetrievalTesting.tsx
index c7fdf2a9..6b388ea1 100644
--- a/lightrag_webui/src/features/RetrievalTesting.tsx
+++ b/lightrag_webui/src/features/RetrievalTesting.tsx
@@ -112,7 +112,7 @@ export default function RetrievalTesting() {
   }, [setMessages])
 
   return (
-    <div className="flex size-full gap-2 px-2 pb-12">
+    <div className="flex size-full gap-2 px-2 pb-12 overflow-hidden">
       <div className="flex grow flex-col gap-4">
         <div className="relative grow">
           <div className="bg-primary-foreground/60 absolute inset-0 flex flex-col overflow-auto rounded-lg border p-2">