From 554e551386e799c48f9c39e4b3bca775130b1377 Mon Sep 17 00:00:00 2001
From: viettranx <viettranx@gmail.com>
Date: Tue, 10 Mar 2026 20:33:24 +0700
Subject: [PATCH] fix(kg): use flex layout for full-height graph rendering

Replace fixed h-[500px] with flex-1 min-h-0 so graph fills available
viewport. Fix knowledge graph page and entities tab containers.
---
 .../knowledge-graph/knowledge-graph-page.tsx  |  4 +-
 ui/web/src/pages/memory/kg-entities-tab.tsx   |  4 +-
 ui/web/src/pages/memory/kg-graph-view.tsx     | 51 ++++++++++---------
 3 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/ui/web/src/pages/knowledge-graph/knowledge-graph-page.tsx b/ui/web/src/pages/knowledge-graph/knowledge-graph-page.tsx
index 4fb14fce..4a71f8c4 100644
--- a/ui/web/src/pages/knowledge-graph/knowledge-graph-page.tsx
+++ b/ui/web/src/pages/knowledge-graph/knowledge-graph-page.tsx
@@ -12,7 +12,7 @@ export function KnowledgeGraphPage() {
   const [userIdFilter, setUserIdFilter] = useState("");
 
   return (
-    <div className="p-4 sm:p-6">
+    <div className="flex h-full flex-col p-4 sm:p-6">
       {/* Header + filters in one row */}
       <div className="flex flex-wrap items-center gap-3">
         <div className="mr-auto">
@@ -44,7 +44,7 @@ export function KnowledgeGraphPage() {
       </div>
 
       {/* Content */}
-      <div className="mt-3">
+      <div className="mt-3 min-h-0 flex-1">
         {!agentId ? (
           <EmptyState
             icon={Network}
diff --git a/ui/web/src/pages/memory/kg-entities-tab.tsx b/ui/web/src/pages/memory/kg-entities-tab.tsx
index c7e1570c..57c2fffe 100644
--- a/ui/web/src/pages/memory/kg-entities-tab.tsx
+++ b/ui/web/src/pages/memory/kg-entities-tab.tsx
@@ -60,7 +60,7 @@ export function KGEntitiesTab({ agentId, userId }: KGEntitiesTabProps) {
     extractFromText(text, provider, model, userId);
 
   return (
-    <div>
+    <div className="flex h-full flex-col">
       {/* Search + stats + actions — single compact row */}
       <div className="flex items-center gap-2 mb-3">
         <Input
@@ -121,6 +121,7 @@ export function KGEntitiesTab({ agentId, userId }: KGEntitiesTabProps) {
       </div>
 
       {/* Content area */}
+      <div className="min-h-0 flex-1">
       {viewMode === "graph" ? (
         <KGGraphView
           entities={graphData.entities}
@@ -189,6 +190,7 @@ export function KGEntitiesTab({ agentId, userId }: KGEntitiesTabProps) {
           </table>
         </div>
       )}
+      </div>
 
       {/* Entity detail dialog */}
       <KGEntityDetailDialog
diff --git a/ui/web/src/pages/memory/kg-graph-view.tsx b/ui/web/src/pages/memory/kg-graph-view.tsx
index 0700f857..b6799cdc 100644
--- a/ui/web/src/pages/memory/kg-graph-view.tsx
+++ b/ui/web/src/pages/memory/kg-graph-view.tsx
@@ -174,36 +174,39 @@ function KGGraphViewInner({ entities, relations, onEntityClick }: KGGraphViewPro
 
   if (entities.length === 0) {
     return (
-      <div className="flex items-center justify-center h-[400px] text-sm text-muted-foreground">
+      <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
         {t("kg.graphView.empty")}
       </div>
     );
   }
 
   return (
-    <div className="h-[500px] rounded-md border bg-background">
-      <ReactFlow
-        nodes={nodes}
-        edges={edges}
-        onNodesChange={onNodesChange}
-        onEdgesChange={onEdgesChange}
-        onNodeClick={handleNodeClick}
-        nodeTypes={nodeTypes}
-        fitView
-        minZoom={0.1}
-        maxZoom={3}
-        proOptions={{ hideAttribution: true }}
-      >
-        <Background gap={20} size={1} />
-        <Controls showInteractive={false} />
-        <MiniMap
-          nodeColor={(n) => {
-            const type = (n.data as any)?.type as string;
-            return (TYPE_COLORS[type] || DEFAULT_COLOR).border;
-          }}
-          maskColor="rgba(0,0,0,0.1)"
-        />
-      </ReactFlow>
+    <div className="flex h-full flex-col rounded-md border bg-background">
+      <div className="min-h-0 flex-1">
+        <ReactFlow
+          nodes={nodes}
+          edges={edges}
+          onNodesChange={onNodesChange}
+          onEdgesChange={onEdgesChange}
+          onNodeClick={handleNodeClick}
+          nodeTypes={nodeTypes}
+          fitView
+          minZoom={0.1}
+          maxZoom={3}
+          proOptions={{ hideAttribution: true }}
+        >
+          <Background gap={20} size={1} />
+          <Controls showInteractive={false} />
+          <MiniMap
+            nodeColor={(n) => {
+              const type = (n.data as any)?.type as string;
+              return (TYPE_COLORS[type] || DEFAULT_COLOR).border;
+            }}
+            maskColor="rgba(0,0,0,0.1)"
+            style={{ width: 100, height: 75 }}
+          />
+        </ReactFlow>
+      </div>
 
       {/* Legend */}
       <div className="flex flex-wrap gap-2 px-3 py-2 border-t text-[10px]">