fix: graph controls gap on compact viewports + model selector z-index (#982)

Co-authored-by: Vorflux AI <noreply@vorflux.com>
Co-authored-by: Vedant Mahajan <vedant.04.mahajan@gmail.com>

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}
 

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

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,
 	}
 

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