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 ( return (
<ThemeProvider> <ThemeProvider>
<TabVisibilityProvider> <TabVisibilityProvider>
<main className="flex h-screen w-screen overflow-x-hidden"> <main className="flex h-screen w-screen overflow-hidden">
<Tabs <Tabs
defaultValue={currentTab} defaultValue={currentTab}
className="!m-0 flex grow flex-col !p-0" className="!m-0 flex grow flex-col !p-0 overflow-hidden"
onValueChange={handleTabChange} onValueChange={handleTabChange}
> >
<SiteHeader /> <SiteHeader />
<div className="relative grow"> <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 /> <DocumentManager />
</TabsContent> </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 /> <GraphViewer />
</TabsContent> </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 /> <RetrievalTesting />
</TabsContent> </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 /> <ApiSite />
</TabsContent> </TabsContent>
</div> </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 // Always render SigmaContainer but control its visibility with CSS
return ( return (
<div className="relative h-full w-full"> <div className="relative h-full w-full overflow-hidden">
<SigmaContainer <SigmaContainer
settings={sigmaSettings} settings={sigmaSettings}
className="!bg-background !size-full overflow-hidden" 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]) }, [setMessages])
return ( 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="flex grow flex-col gap-4">
<div className="relative grow"> <div className="relative grow">
<div className="bg-primary-foreground/60 absolute inset-0 flex flex-col overflow-auto rounded-lg border p-2"> <div className="bg-primary-foreground/60 absolute inset-0 flex flex-col overflow-auto rounded-lg border p-2">