From 47a714dba4e3eeac82112bb151ae7dde72392072 Mon Sep 17 00:00:00 2001
From: Ishaan Gupta <ishaankone@gmail.com>
Date: Sat, 16 May 2026 14:23:41 +0530
Subject: [PATCH] final responsievness changes

---
 apps/web/app/(app)/layout.tsx               |  2 --
 apps/web/components/dashboard-view.tsx      | 20 +++++++++++------
 apps/web/components/mobile-banner.tsx       | 24 ---------------------
 apps/web/components/select-spaces-modal.tsx | 20 ++++++++---------
 4 files changed, 23 insertions(+), 43 deletions(-)
 delete mode 100644 apps/web/components/mobile-banner.tsx

diff --git a/apps/web/app/(app)/layout.tsx b/apps/web/app/(app)/layout.tsx
index 542c0a65..33c88e04 100644
--- a/apps/web/app/(app)/layout.tsx
+++ b/apps/web/app/(app)/layout.tsx
@@ -1,13 +1,11 @@
 "use client"
 
 import { EnsureWorkspace } from "@/components/ensure-workspace"
-import { MobileBanner } from "@/components/mobile-banner"
 import { NextAppResearchCta } from "@/components/next-app-research-cta"
 
 export default function AppLayout({ children }: { children: React.ReactNode }) {
 	return (
 		<>
-			<MobileBanner />
 			<EnsureWorkspace>{children}</EnsureWorkspace>
 			<NextAppResearchCta />
 		</>
diff --git a/apps/web/components/dashboard-view.tsx b/apps/web/components/dashboard-view.tsx
index e846fb0d..c57867be 100644
--- a/apps/web/components/dashboard-view.tsx
+++ b/apps/web/components/dashboard-view.tsx
@@ -800,23 +800,27 @@ export function DashboardView({
 					className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
 				>
 					{/* Quick actions */}
-					<div className="flex items-center gap-0.5 -mx-2.5">
+					<div className="grid grid-cols-3 gap-1 [&>span]:hidden sm:-mx-2.5 sm:flex sm:items-center sm:gap-0.5 sm:[&>span]:inline">
 						<button
 							type="button"
 							onClick={() => onAddMemory("link")}
-							className="flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-sm text-fg-subtle hover:bg-surface-hover hover:text-white transition-colors cursor-pointer"
+							className="flex min-w-0 items-center justify-center gap-1 rounded-lg px-1 py-1.5 text-[11px] leading-none text-fg-subtle hover:bg-surface-hover hover:text-white transition-colors cursor-pointer sm:gap-1.5 sm:px-2.5 sm:text-sm sm:leading-tight"
 						>
 							<Link2 className="size-3.5 shrink-0" />
-							{personalizedCopy.saveLink}
+							<span className="min-w-0 truncate whitespace-nowrap text-center sm:text-left">
+								{personalizedCopy.saveLink}
+							</span>
 						</button>
 						<span className="text-[#3A4455] select-none">·</span>
 						<button
 							type="button"
 							onClick={() => onAddMemory("note")}
-							className="flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-sm text-fg-subtle hover:bg-surface-hover hover:text-white transition-colors cursor-pointer"
+							className="flex min-w-0 items-center justify-center gap-1 rounded-lg px-1 py-1.5 text-[11px] leading-none text-fg-subtle hover:bg-surface-hover hover:text-white transition-colors cursor-pointer sm:gap-1.5 sm:px-2.5 sm:text-sm sm:leading-tight"
 						>
 							<FileText className="size-3.5 shrink-0" />
-							{personalizedCopy.writeNote}
+							<span className="min-w-0 truncate whitespace-nowrap text-center sm:text-left">
+								{personalizedCopy.writeNote}
+							</span>
 						</button>
 						<span className="text-[#3A4455] select-none">·</span>
 						<button
@@ -825,10 +829,12 @@ export function DashboardView({
 								analytics.searchOpened({ source: "header" })
 								onOpenSearch()
 							}}
-							className="flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-sm text-fg-subtle hover:bg-surface-hover hover:text-white transition-colors cursor-pointer"
+							className="flex min-w-0 items-center justify-center gap-1 rounded-lg px-1 py-1.5 text-[11px] leading-none text-fg-subtle hover:bg-surface-hover hover:text-white transition-colors cursor-pointer sm:gap-1.5 sm:px-2.5 sm:text-sm sm:leading-tight"
 						>
 							<SearchIcon className="size-3.5 shrink-0" />
-							Search
+							<span className="min-w-0 truncate whitespace-nowrap text-center sm:text-left">
+								Search
+							</span>
 						</button>
 					</div>
 
diff --git a/apps/web/components/mobile-banner.tsx b/apps/web/components/mobile-banner.tsx
deleted file mode 100644
index 245b6952..00000000
--- a/apps/web/components/mobile-banner.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-"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>
-	)
-}
diff --git a/apps/web/components/select-spaces-modal.tsx b/apps/web/components/select-spaces-modal.tsx
index e8fff2fa..c3834ec3 100644
--- a/apps/web/components/select-spaces-modal.tsx
+++ b/apps/web/components/select-spaces-modal.tsx
@@ -464,7 +464,7 @@ export function SelectSpacesModal({
 		<Dialog open={isOpen} onOpenChange={handleOpenChange}>
 			<DialogContent
 				className={cn(
-					"w-[92%]! max-w-[720px]! border-none bg-[#1B1F24] flex flex-col p-0 gap-0 rounded-[22px] overflow-hidden",
+					"w-[calc(100vw-1rem)]! max-w-[720px]! max-h-[calc(100dvh-1rem)] border-none bg-[#1B1F24] flex flex-col p-0 gap-0 rounded-[22px] overflow-hidden sm:w-[92vw]!",
 					dmSansClassName(),
 				)}
 				style={{
@@ -498,9 +498,9 @@ export function SelectSpacesModal({
 					</DialogPrimitive.Close>
 				</div>
 
-				<div className="mt-4 flex min-h-[420px] gap-3 px-4 pb-4">
-					<div className="w-[200px] shrink-0 overflow-y-auto scrollbar-thin pr-1">
-						<div className="flex flex-col gap-1">
+				<div className="mt-4 flex min-h-0 flex-1 flex-col gap-5 overflow-hidden px-4 pb-4 sm:min-h-[420px] sm:flex-row sm:gap-3">
+					<div className="w-full shrink-0 overflow-y-auto scrollbar-thin sm:w-[200px] sm:pr-1">
+						<div className="grid grid-cols-2 gap-1 sm:flex sm:flex-col">
 							{categories.map((category) => {
 								const isActive = activeCategory === category.id
 								return (
@@ -509,7 +509,7 @@ export function SelectSpacesModal({
 										type="button"
 										onClick={() => setActiveCategory(category.id)}
 										className={cn(
-											"flex items-center gap-2.5 px-3 py-2 rounded-[12px] text-left transition-colors cursor-pointer focus:outline-none focus:ring-0",
+											"flex min-w-0 items-center gap-2.5 px-3 py-2 rounded-[12px] text-left transition-colors cursor-pointer focus:outline-none focus:ring-0 sm:w-full",
 											isActive
 												? "bg-[#14161A] shadow-inside-out text-[#fafafa]"
 												: "text-[#A1A1AA] hover:bg-[#14161A]/50 hover:text-[#fafafa]",
@@ -563,7 +563,7 @@ export function SelectSpacesModal({
 
 							{discoverCategories.length > 0 && (
 								<>
-									<div className="mt-2 px-3 pt-2 pb-1 text-[10px] uppercase tracking-[0.08em] text-[#737373]">
+									<div className="col-span-2 mt-3 px-3 pt-2 pb-1 text-[10px] uppercase tracking-[0.08em] text-[#737373] sm:mt-2 sm:px-3 sm:pt-2 sm:pb-1">
 										Discover
 									</div>
 									{discoverCategories.map((category) => {
@@ -574,7 +574,7 @@ export function SelectSpacesModal({
 												type="button"
 												onClick={() => setActiveCategory(category.id)}
 												className={cn(
-													"flex items-center gap-2.5 px-3 py-2 rounded-[12px] text-left transition-colors cursor-pointer focus:outline-none focus:ring-0",
+													"flex min-w-0 items-center gap-2.5 px-3 py-2 rounded-[12px] text-left transition-colors cursor-pointer focus:outline-none focus:ring-0 sm:w-full",
 													isActive
 														? "bg-[#14161A] shadow-inside-out text-[#fafafa] opacity-100"
 														: "opacity-55 hover:opacity-100 hover:bg-[#14161A]/50 text-[#A1A1AA] hover:text-[#fafafa]",
@@ -612,7 +612,7 @@ export function SelectSpacesModal({
 						</div>
 					</div>
 
-					<div className="flex-1 flex flex-col min-w-0 gap-3">
+					<div className="flex min-h-0 flex-1 flex-col gap-3">
 						{activeCategory.startsWith("discover:") ? (
 							<DiscoverPanel
 								catalogId={activeCategory.slice("discover:".length)}
@@ -649,7 +649,7 @@ export function SelectSpacesModal({
 									/>
 								</div>
 
-								<div className="flex-1 overflow-y-auto scrollbar-thin max-h-[360px] pr-1">
+								<div className="min-h-0 flex-1 overflow-y-auto scrollbar-thin pr-1 sm:max-h-[360px]">
 									{filteredProjects.length === 0 ? (
 										<p className="text-center text-[#737373] text-sm py-8">
 											No spaces found
@@ -740,7 +740,7 @@ function DiscoverPanel({
 	const isConnected = !!newKey
 
 	return (
-		<div className="flex-1 overflow-y-auto scrollbar-thin pr-1 flex flex-col gap-4">
+		<div className="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto scrollbar-thin pr-1">
 			<div className="flex items-start gap-3">
 				<div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-[10px] border border-[#1E293B] bg-[#080B0F]">
 					<Image