From 4ddbd78519308ff9e7cd9c142ff8d9cdd67c85c0 Mon Sep 17 00:00:00 2001
From: Vorflux AI <noreply@vorflux.com>
Date: Thu, 21 May 2026 00:32:02 +0000
Subject: [PATCH] fix: graph controls gap on compact viewports and model
 selector z-index

- memory-graph: stack NavigationControls and Legend in a single flex
  column at bottom-left instead of using separate absolute-positioned
  elements with a hardcoded bottom offset, eliminating the empty gap on
  compact/mobile viewports
- memory-graph: bump version 0.2.1 -> 0.2.2
- web: add z-10 to ChatModelSelector wrapper so its absolute dropdown
  renders above the SpaceSelector button that follows it in DOM order
---
 apps/web/components/chat/model-selector.tsx   |  2 +-
 packages/memory-graph/package.json            |  2 +-
 .../memory-graph/src/components/legend.tsx    |  4 --
 .../src/components/memory-graph.tsx           | 52 ++++++++++---------
 4 files changed, 29 insertions(+), 31 deletions(-)

diff --git a/apps/web/components/chat/model-selector.tsx b/apps/web/components/chat/model-selector.tsx
index a9dd2d45..07465e7b 100644
--- a/apps/web/components/chat/model-selector.tsx
+++ b/apps/web/components/chat/model-selector.tsx
@@ -90,7 +90,7 @@ export default function ChatModelSelector({
 	return (
 		<div
 			ref={containerRef}
-			className="relative flex min-w-0 shrink items-center gap-2"
+			className="relative z-10 flex min-w-0 shrink items-center gap-2"
 		>
 			{trigger}
 
diff --git a/packages/memory-graph/package.json b/packages/memory-graph/package.json
index fcb2667e..7d537b7d 100644
--- a/packages/memory-graph/package.json
+++ b/packages/memory-graph/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@supermemory/memory-graph",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Interactive graph visualization component for Supermemory - visualize and explore your memory connections",
   "type": "module",
   "main": "./src/index.tsx",
diff --git a/packages/memory-graph/src/components/legend.tsx b/packages/memory-graph/src/components/legend.tsx
index 0290226e..724efdd7 100644
--- a/packages/memory-graph/src/components/legend.tsx
+++ b/packages/memory-graph/src/components/legend.tsx
@@ -200,11 +200,7 @@ export const Legend = memo(function Legend({
 	const connectionCount = edges.length
 
 	const outerStyle: React.CSSProperties = {
-		position: "absolute",
-		zIndex: 20,
 		overflow: "hidden",
-		bottom: 16,
-		left: 16,
 		width: 214,
 	}
 
diff --git a/packages/memory-graph/src/components/memory-graph.tsx b/packages/memory-graph/src/components/memory-graph.tsx
index 110a0194..ed5ec094 100644
--- a/packages/memory-graph/src/components/memory-graph.tsx
+++ b/packages/memory-graph/src/components/memory-graph.tsx
@@ -642,11 +642,15 @@ export function MemoryGraph({
 		justifyContent: "center",
 	}
 
-	const navControlsStyle: React.CSSProperties = {
+	const bottomLeftStackStyle: React.CSSProperties = {
 		position: "absolute",
-		bottom: isCompactViewport ? 148 : 72,
+		bottom: 16,
 		left: 16,
-		zIndex: 15,
+		zIndex: 20,
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "flex-start",
+		gap: 8,
 	}
 
 	return (
@@ -703,28 +707,26 @@ export function MemoryGraph({
 					/>
 				)}
 
-				<div>
-					{containerSize.width > 0 && (
-						<div style={navControlsStyle}>
-							<NavigationControls
-								nodes={nodes}
-								compact={isCompactViewport}
-								onAutoFit={handleAutoFit}
-								onCenter={handleCenter}
-								onZoomIn={handleZoomIn}
-								onZoomOut={handleZoomOut}
-								zoomLevel={zoomDisplay}
-								colors={colors}
-							/>
-						</div>
-					)}
-					<Legend
-						colors={colors}
-						edges={edges}
-						isLoading={isLoading}
-						nodes={nodes}
-					/>
-				</div>
+				{containerSize.width > 0 && (
+					<div style={bottomLeftStackStyle}>
+						<NavigationControls
+							nodes={nodes}
+							compact={isCompactViewport}
+							onAutoFit={handleAutoFit}
+							onCenter={handleCenter}
+							onZoomIn={handleZoomIn}
+							onZoomOut={handleZoomOut}
+							zoomLevel={zoomDisplay}
+							colors={colors}
+						/>
+						<Legend
+							colors={colors}
+							edges={edges}
+							isLoading={isLoading}
+							nodes={nodes}
+						/>
+					</div>
+				)}
 			</div>
 		</div>
 	)