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 1/5] 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 a9dd2d455..07465e7b4 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 fcb2667ea..7d537b7df 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 0290226e7..724efdd76 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 110a01943..ed5ec0940 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>
 	)

From be6df8faa601aff1dee72dca9aa60ea3fd2ef9c3 Mon Sep 17 00:00:00 2001
From: Vorflux AI <noreply@vorflux.com>
Date: Fri, 22 May 2026 14:38:57 +0000
Subject: [PATCH 2/5] fix: lift graph controls above chat bar on compact
 viewports

---
 packages/memory-graph/package.json                    | 2 +-
 packages/memory-graph/src/components/memory-graph.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/memory-graph/package.json b/packages/memory-graph/package.json
index 7d537b7df..aea9f1d6d 100644
--- a/packages/memory-graph/package.json
+++ b/packages/memory-graph/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@supermemory/memory-graph",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "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/memory-graph.tsx b/packages/memory-graph/src/components/memory-graph.tsx
index ed5ec0940..8a8373346 100644
--- a/packages/memory-graph/src/components/memory-graph.tsx
+++ b/packages/memory-graph/src/components/memory-graph.tsx
@@ -644,7 +644,7 @@ export function MemoryGraph({
 
 	const bottomLeftStackStyle: React.CSSProperties = {
 		position: "absolute",
-		bottom: 16,
+		bottom: isCompactViewport ? 132 : 16,
 		left: 16,
 		zIndex: 20,
 		display: "flex",

From 97cf5f57f9ef7306c2937468a5ee3ad698d064b5 Mon Sep 17 00:00:00 2001
From: Vorflux AI <noreply@vorflux.com>
Date: Fri, 22 May 2026 14:40:20 +0000
Subject: [PATCH 3/5] fix: use 768px breakpoint for chat bar clearance to match
 isMobile

---
 packages/memory-graph/src/components/memory-graph.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/memory-graph/src/components/memory-graph.tsx b/packages/memory-graph/src/components/memory-graph.tsx
index 8a8373346..6d0d112bc 100644
--- a/packages/memory-graph/src/components/memory-graph.tsx
+++ b/packages/memory-graph/src/components/memory-graph.tsx
@@ -644,7 +644,7 @@ export function MemoryGraph({
 
 	const bottomLeftStackStyle: React.CSSProperties = {
 		position: "absolute",
-		bottom: isCompactViewport ? 132 : 16,
+		bottom: containerSize.width > 0 && containerSize.width < 768 ? 132 : 16,
 		left: 16,
 		zIndex: 20,
 		display: "flex",

From 87513e5e9c0064cf09032c7a146da74770f14b4f Mon Sep 17 00:00:00 2001
From: Vedant Mahajan <vedant.04.mahajan@gmail.com>
Date: Sat, 23 May 2026 19:02:23 +0530
Subject: [PATCH 4/5] update package version

---
 packages/memory-graph/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/memory-graph/package.json b/packages/memory-graph/package.json
index aea9f1d6d..7d537b7df 100644
--- a/packages/memory-graph/package.json
+++ b/packages/memory-graph/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@supermemory/memory-graph",
-  "version": "0.2.3",
+  "version": "0.2.2",
   "description": "Interactive graph visualization component for Supermemory - visualize and explore your memory connections",
   "type": "module",
   "main": "./src/index.tsx",

From 4df114e61576113850ac9ebc808c429c65801aaa Mon Sep 17 00:00:00 2001
From: ved015 <vedant.04.mahajan@gmail.com>
Date: Sat, 23 May 2026 19:12:08 +0530
Subject: [PATCH 5/5] fix legend position in memories tab

---
 packages/memory-graph/src/components/memory-graph.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/memory-graph/src/components/memory-graph.tsx b/packages/memory-graph/src/components/memory-graph.tsx
index 6d0d112bc..ed5ec0940 100644
--- a/packages/memory-graph/src/components/memory-graph.tsx
+++ b/packages/memory-graph/src/components/memory-graph.tsx
@@ -644,7 +644,7 @@ export function MemoryGraph({
 
 	const bottomLeftStackStyle: React.CSSProperties = {
 		position: "absolute",
-		bottom: containerSize.width > 0 && containerSize.width < 768 ? 132 : 16,
+		bottom: 16,
 		left: 16,
 		zIndex: 20,
 		display: "flex",