yangdx commited on
Commit
132f86c
·
1 Parent(s): f70a04d

Fix overflow issues in UI components

Browse files

- 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 CHANGED
@@ -56,24 +56,24 @@ function App() {
56
  return (
57
  <ThemeProvider>
58
  <TabVisibilityProvider>
59
- <main className="flex h-screen w-screen overflow-x-hidden">
60
  <Tabs
61
  defaultValue={currentTab}
62
- className="!m-0 flex grow flex-col !p-0"
63
  onValueChange={handleTabChange}
64
  >
65
  <SiteHeader />
66
  <div className="relative grow">
67
- <TabsContent value="documents" className="absolute top-0 right-0 bottom-0 left-0">
68
  <DocumentManager />
69
  </TabsContent>
70
- <TabsContent value="knowledge-graph" className="absolute top-0 right-0 bottom-0 left-0">
71
  <GraphViewer />
72
  </TabsContent>
73
- <TabsContent value="retrieval" className="absolute top-0 right-0 bottom-0 left-0">
74
  <RetrievalTesting />
75
  </TabsContent>
76
- <TabsContent value="api" className="absolute top-0 right-0 bottom-0 left-0">
77
  <ApiSite />
78
  </TabsContent>
79
  </div>
 
56
  return (
57
  <ThemeProvider>
58
  <TabVisibilityProvider>
59
+ <main className="flex h-screen w-screen overflow-hidden">
60
  <Tabs
61
  defaultValue={currentTab}
62
+ className="!m-0 flex grow flex-col !p-0 overflow-hidden"
63
  onValueChange={handleTabChange}
64
  >
65
  <SiteHeader />
66
  <div className="relative grow">
67
+ <TabsContent value="documents" className="absolute top-0 right-0 bottom-0 left-0 overflow-auto">
68
  <DocumentManager />
69
  </TabsContent>
70
+ <TabsContent value="knowledge-graph" className="absolute top-0 right-0 bottom-0 left-0 overflow-hidden">
71
  <GraphViewer />
72
  </TabsContent>
73
+ <TabsContent value="retrieval" className="absolute top-0 right-0 bottom-0 left-0 overflow-hidden">
74
  <RetrievalTesting />
75
  </TabsContent>
76
+ <TabsContent value="api" className="absolute top-0 right-0 bottom-0 left-0 overflow-hidden">
77
  <ApiSite />
78
  </TabsContent>
79
  </div>
lightrag_webui/src/features/GraphViewer.tsx CHANGED
@@ -182,7 +182,7 @@ const GraphViewer = () => {
182
 
183
  // Always render SigmaContainer but control its visibility with CSS
184
  return (
185
- <div className="relative h-full w-full">
186
  <SigmaContainer
187
  settings={sigmaSettings}
188
  className="!bg-background !size-full overflow-hidden"
 
182
 
183
  // Always render SigmaContainer but control its visibility with CSS
184
  return (
185
+ <div className="relative h-full w-full overflow-hidden">
186
  <SigmaContainer
187
  settings={sigmaSettings}
188
  className="!bg-background !size-full overflow-hidden"
lightrag_webui/src/features/RetrievalTesting.tsx CHANGED
@@ -112,7 +112,7 @@ export default function RetrievalTesting() {
112
  }, [setMessages])
113
 
114
  return (
115
- <div className="flex size-full gap-2 px-2 pb-12">
116
  <div className="flex grow flex-col gap-4">
117
  <div className="relative grow">
118
  <div className="bg-primary-foreground/60 absolute inset-0 flex flex-col overflow-auto rounded-lg border p-2">
 
112
  }, [setMessages])
113
 
114
  return (
115
+ <div className="flex size-full gap-2 px-2 pb-12 overflow-hidden">
116
  <div className="flex grow flex-col gap-4">
117
  <div className="relative grow">
118
  <div className="bg-primary-foreground/60 absolute inset-0 flex flex-col overflow-auto rounded-lg border p-2">