From 4c0dfd1a32680b501c47a021d0127283b788e764 Mon Sep 17 00:00:00 2001
From: Ishaan Gupta <ishaankone@gmail.com>
Date: Fri, 8 May 2026 19:46:26 +0530
Subject: [PATCH] fix responsiveness for graph layout

---
 apps/web/app/(app)/page.tsx               | 22 ++++------------------
 apps/web/components/graph-layout-view.tsx | 13 +++++++++----
 apps/web/components/mobile-banner.tsx     | 23 +----------------------
 3 files changed, 14 insertions(+), 44 deletions(-)

diff --git a/apps/web/app/(app)/page.tsx b/apps/web/app/(app)/page.tsx
index e7d7caff..4c54f582 100644
--- a/apps/web/app/(app)/page.tsx
+++ b/apps/web/app/(app)/page.tsx
@@ -515,12 +515,11 @@ export default function NewPage() {
 	const gradientTopPosition = gradientTopPositionForWidth(viewportWidth)
 
 	const isChatView = viewMode === "chat"
-	const isGraphMode = viewMode === "graph" && !isMobile
+	const isGraphMode = viewMode === "graph"
 	const isMemoriesDesktop = viewMode === "list" && !isMobile
 	const isHomeDesktop = viewMode === "dashboard" && !isMobile
 	const showNovaBackdrop = isGraphMode || isMemoriesDesktop || isHomeDesktop
-	const isDashboardShell =
-		viewMode === "dashboard" || (viewMode === "graph" && isMobile)
+	const isDashboardShell = viewMode === "dashboard"
 
 	return (
 		<HotkeysProvider>
@@ -629,7 +628,7 @@ export default function NewPage() {
 									<XBookmarksDetailView
 										onBack={() => void setViewMode("integrations")}
 									/>
-								) : viewMode === "graph" && !isMobile ? (
+								) : viewMode === "graph" ? (
 									<div className="min-h-0 min-w-0 flex-1">
 										<GraphLayoutView />
 									</div>
@@ -674,20 +673,7 @@ export default function NewPage() {
 								) : (
 									<DashboardView
 										spaceLabel={dashboardSpaceLabel}
-										headerNotice={
-											viewMode === "graph" && isMobile ? (
-												<div
-													id="graph-mobile-notice"
-													className="rounded-lg border border-[#2261CA33] bg-[#041127] px-3 py-2.5 text-sm text-[#8B8B8B]"
-												>
-													<span className="font-medium text-white">
-														Graph view is available on desktop.
-													</span>{" "}
-													Use a larger screen for the full graph, or keep
-													working from this home view.
-												</div>
-											) : undefined
-										}
+										headerNotice={undefined}
 										highlights={highlightsData?.highlights ?? []}
 										isLoadingHighlights={isLoadingHighlights}
 										onAddMemory={handleAddMemory}
diff --git a/apps/web/components/graph-layout-view.tsx b/apps/web/components/graph-layout-view.tsx
index 0a21c357..97e6a1ab 100644
--- a/apps/web/components/graph-layout-view.tsx
+++ b/apps/web/components/graph-layout-view.tsx
@@ -3,6 +3,7 @@
 import { memo, useCallback, useRef } from "react"
 import { useQueryState } from "nuqs"
 import Image from "next/image"
+import { Share2 } from "lucide-react"
 import { MemoryGraph } from "./memory-graph"
 import { useProject } from "@/stores"
 import { useGraphHighlights } from "@/stores/highlights"
@@ -30,7 +31,7 @@ export const GraphLayoutView = memo(function GraphLayoutView() {
 	}, [setIsShareModalOpen])
 
 	return (
-		<div className="relative h-full min-h-0 w-full">
+		<div className="relative h-full min-h-[calc(100dvh-8.5rem)] w-full md:min-h-0">
 			{/* Full-width graph */}
 			<div className="absolute inset-0">
 				<MemoryGraph
@@ -44,22 +45,26 @@ export const GraphLayoutView = memo(function GraphLayoutView() {
 			</div>
 
 			{/* Share graph button - top left */}
-			<div className="absolute top-4 left-4 z-15">
+			<div className="absolute left-3 top-3 z-15 md:left-4 md:top-4">
 				<Button
 					variant="headers"
 					className={cn(
-						"rounded-full text-base gap-2 h-10!",
+						"size-10 rounded-full p-0 md:size-auto md:h-10! md:px-4",
+						"md:gap-2 md:text-base",
 						dmSansClassName(),
 					)}
 					onClick={handleShare}
+					aria-label="Share graph"
 				>
 					<Image
 						src="/icons/share-graph.svg"
 						alt="Share"
 						width={16}
 						height={16}
+						className="hidden md:block"
 					/>
-					Share graph
+					<Share2 className="size-4 md:hidden" />
+					<span className="hidden md:inline">Share graph</span>
 				</Button>
 			</div>
 
diff --git a/apps/web/components/mobile-banner.tsx b/apps/web/components/mobile-banner.tsx
index 245b6952..0f3153b3 100644
--- a/apps/web/components/mobile-banner.tsx
+++ b/apps/web/components/mobile-banner.tsx
@@ -1,24 +1,3 @@
-"use client"
-
-import { useIsMobile } from "@hooks/use-mobile"
-import { cn } from "@lib/utils"
-
 export function MobileBanner() {
-	const isMobile = useIsMobile()
-
-	if (!isMobile) {
-		return null
-	}
-
-	return (
-		<div
-			className={cn(
-				"bg-yellow-50 dark:bg-yellow-950/20 border-b border-yellow-200 dark:border-yellow-900/30",
-				"px-4 py-2 text-xs text-yellow-800 dark:text-yellow-200 text-center",
-			)}
-			id="mobile-development-banner"
-		>
-			🚧 Mobile responsive in development. Desktop recommended.
-		</div>
-	)
+	return null
 }