gardel/lightrag
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix overflow issues in UI components

Browse Source 
- 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
This commit is contained in:
yangdx
2025-03-17 05:00:32 +08:00
parent 5f27d42fd9
commit 2753cbed97
3 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
lightrag_webui/src/App.tsx
View File

@@ -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>

2
lightrag_webui/src/features/GraphViewer.tsx
View File

@@ -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"

2
lightrag_webui/src/features/RetrievalTesting.tsx
View File

@@ -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">