fix: mobile layout on empty projects (#479)

Issue:
On mobile, connect to ai modal is overlapping and hard to use the app when project is empty

Fix:
\- Disabling the Connect to ai modal on mobile

**Reason for this fix**, as MCP modal is hardly needed for mobile users

[Report issue link from Discord](https://discord.com/channels/1114913976422256742/1378895805741793350/1425912333556777082)

2 files changed, 55 insertions, 15 deletions

diff --git a/apps/web/components/header.tsx b/apps/web/components/header.tsx
index 19a6ec3a..44bb1f74 100644
--- a/apps/web/components/header.tsx
+++ b/apps/web/components/header.tsx
@@ -275,7 +275,7 @@ export function Header({ onAddMemory }: { onAddMemory?: () => void }) {
 								<Button
 									variant="ghost"
 									size="sm"
-									className="gap-1.5"
+									className="gap-1.5 hidden md:block"
 									onClick={() => setMcpModalOpen(true)}
 								>
 									<MCPIcon className="h-4 w-4" />
diff --git a/apps/web/components/memories.tsx b/apps/web/components/memories.tsx
index 568e9eb5..42e70fba 100644
--- a/apps/web/components/memories.tsx
+++ b/apps/web/components/memories.tsx
@@ -13,6 +13,7 @@ import { MasonryMemoryList } from "@/components/masonry-memory-list"
 import { AddMemoryView } from "@/components/views/add-memory"
 import { useChatOpen, useProject, useGraphModal } from "@/stores"
 import { useGraphHighlights } from "@/stores/highlights"
+import { useIsMobile } from "@hooks/use-mobile"
 
 type DocumentsResponse = z.infer<typeof DocumentsWithMemoriesResponseSchema>
 type DocumentWithMemories = DocumentsResponse["documents"][0]
@@ -27,6 +28,7 @@ export function Memories() {
 	const [injectedDocs, setInjectedDocs] = useState<DocumentWithMemories[]>([])
 	const [showAddMemoryView, setShowAddMemoryView] = useState(false)
 	const [showConnectAIModal, setShowConnectAIModal] = useState(false)
+	const isMobile = useIsMobile()
 
 	const IS_DEV = process.env.NODE_ENV === "development"
 	const PAGE_SIZE = IS_DEV ? 100 : 100
@@ -162,10 +164,10 @@ export function Memories() {
 
 	// Show connect AI modal if no documents
 	useEffect(() => {
-		if (allDocuments.length === 0) {
+		if (allDocuments.length === 0 && !isMobile) {
 			setShowConnectAIModal(true)
 		}
-	}, [allDocuments.length])
+	}, [allDocuments.length, isMobile])
 
 	if (!user) {
 		return (
@@ -190,10 +192,30 @@ export function Memories() {
 					totalLoaded={totalLoaded}
 				>
 					<div className="absolute inset-0 flex items-center justify-center">
-						<ConnectAIModal
-							onOpenChange={setShowConnectAIModal}
-							open={showConnectAIModal}
-						>
+						{!isMobile ? (
+							<ConnectAIModal
+								onOpenChange={setShowConnectAIModal}
+								open={showConnectAIModal}
+							>
+								<div className="rounded-xl overflow-hidden cursor-pointer hover:bg-white/5 transition-colors p-6">
+									<div className="relative z-10 text-slate-200 text-center">
+										<div className="flex flex-col gap-3">
+											<button
+												className="text-sm text-blue-400 hover:text-blue-300 transition-colors underline"
+												onClick={(e) => {
+													e.stopPropagation()
+													setShowAddMemoryView(true)
+													setShowConnectAIModal(false)
+												}}
+												type="button"
+											>
+												Add your first memory
+											</button>
+										</div>
+									</div>
+								</div>
+							</ConnectAIModal>
+						) : (
 							<div className="rounded-xl overflow-hidden cursor-pointer hover:bg-white/5 transition-colors p-6">
 								<div className="relative z-10 text-slate-200 text-center">
 									<div className="flex flex-col gap-3">
@@ -202,7 +224,6 @@ export function Memories() {
 											onClick={(e) => {
 												e.stopPropagation()
 												setShowAddMemoryView(true)
-												setShowConnectAIModal(false)
 											}}
 											type="button"
 										>
@@ -211,7 +232,7 @@ export function Memories() {
 									</div>
 								</div>
 							</div>
-						</ConnectAIModal>
+						)}
 					</div>
 				</MasonryMemoryList>
 
@@ -244,10 +265,30 @@ export function Memories() {
 							highlightsVisible={isOpen}
 						>
 							<div className="absolute inset-0 flex items-center justify-center">
-								<ConnectAIModal
-									onOpenChange={setShowConnectAIModal}
-									open={showConnectAIModal}
-								>
+								{!isMobile ? (
+									<ConnectAIModal
+										onOpenChange={setShowConnectAIModal}
+										open={showConnectAIModal}
+									>
+										<div className="rounded-xl overflow-hidden cursor-pointer hover:bg-white/5 transition-colors p-6">
+											<div className="relative z-10 text-slate-200 text-center">
+												<div className="flex flex-col gap-3">
+													<button
+														className="text-sm text-blue-400 hover:text-blue-300 transition-colors underline"
+														onClick={(e) => {
+															e.stopPropagation()
+															setShowAddMemoryView(true)
+															setShowConnectAIModal(false)
+														}}
+														type="button"
+													>
+														Add your first memory
+													</button>
+												</div>
+											</div>
+										</div>
+									</ConnectAIModal>
+								) : (
 									<div className="rounded-xl overflow-hidden cursor-pointer hover:bg-white/5 transition-colors p-6">
 										<div className="relative z-10 text-slate-200 text-center">
 											<div className="flex flex-col gap-3">
@@ -256,7 +297,6 @@ export function Memories() {
 													onClick={(e) => {
 														e.stopPropagation()
 														setShowAddMemoryView(true)
-														setShowConnectAIModal(false)
 													}}
 													type="button"
 												>
@@ -265,7 +305,7 @@ export function Memories() {
 											</div>
 										</div>
 									</div>
-								</ConnectAIModal>
+								)}
 							</div>
 						</MemoryGraph>
 					</div>