From 2c222732dc70f9f8f0751cf96cd47c2ca59ff8c7 Mon Sep 17 00:00:00 2001
From: Mahesh Sanikommu <maheshthedev@gmail.com>
Date: Tue, 26 May 2026 00:53:22 -0700
Subject: [PATCH] Fix mobile space switching in add-content drawer

Render the space selector on mobile (was desktop-only), move the tab
group to the top of the drawer, place the selector inline with the
Add button, and tidy the Files-tab header.
---
 apps/web/components/add-document/file.tsx  |  9 ++--
 apps/web/components/add-document/index.tsx | 63 ++++++++++++----------
 2 files changed, 40 insertions(+), 32 deletions(-)

diff --git a/apps/web/components/add-document/file.tsx b/apps/web/components/add-document/file.tsx
index 512ebd09..beb31878 100644
--- a/apps/web/components/add-document/file.tsx
+++ b/apps/web/components/add-document/file.tsx
@@ -194,9 +194,12 @@ export function FileContent({
 			)}
 		>
 			<div className="flex flex-col gap-2">
-				<p className="text-[16px] font-medium pl-2">
-					Upload files (images, PDF, documents, sheets, markdown)
-				</p>
+				<div className="flex flex-col gap-0.5 pl-2">
+					<p className="text-[16px] font-medium">Upload files</p>
+					<p className="text-[#737373] text-xs">
+						Images, PDF, documents, sheets, markdown
+					</p>
+				</div>
 				<label
 					onDragOver={handleDragOver}
 					onDragLeave={handleDragLeave}
diff --git a/apps/web/components/add-document/index.tsx b/apps/web/components/add-document/index.tsx
index cc308f90..d3bb9e33 100644
--- a/apps/web/components/add-document/index.tsx
+++ b/apps/web/components/add-document/index.tsx
@@ -105,7 +105,7 @@ const tabs = [
 		id: "connect" as const,
 		icon: ZapIcon,
 		title: "Connect knowledge bases",
-		compactLabel: "Connections",
+		compactLabel: "Connect",
 		description: "Sync with Google Drive, Notion and OneDrive and import data",
 		isPro: true,
 	},
@@ -284,6 +284,18 @@ export function AddDocument({
 	const fileTabSubmitDisabled =
 		activeTab === "file" && (!fileTabHasPending || isSubmitting)
 
+	const spaceSelector = (
+		<SpaceSelector
+			selectedProjects={[localSelectedProject]}
+			onValueChange={(projects) =>
+				setLocalSelectedProject(projects[0] ?? localSelectedProject)
+			}
+			variant="insideOut"
+			compact={isMobile}
+			triggerClassName={cn(isMobile && "h-12 shrink-0")}
+		/>
+	)
+
 	return (
 		<div className="flex h-full min-h-0 flex-col overflow-hidden text-white md:flex-row md:space-x-5">
 			{isMobile && !hasPaidPlan && (
@@ -445,7 +457,24 @@ export function AddDocument({
 					isMobile ? "w-full px-4 pt-1" : "w-2/3 px-1",
 				)}
 			>
-				<div className="min-h-0 flex-1 overflow-auto scrollbar-thin">
+				{isMobile && (
+						<div className="mb-3 flex h-10 w-full shrink-0 items-center overflow-hidden rounded-full border border-[#1F2937] bg-[#0D121A] p-1">
+							{tabs.map((tab) => (
+								<TabButton
+									key={tab.id}
+									active={activeTab === tab.id}
+									onClick={() => setActiveTab(tab.id)}
+									icon={tab.icon}
+									title={tab.title}
+									compactLabel={tab.compactLabel}
+									description={tab.description}
+									isPro={tab.isPro}
+									compact
+								/>
+							))}
+						</div>
+					)}
+					<div className="min-h-0 flex-1 overflow-auto scrollbar-thin">
 					{activeTab === "note" && (
 						<NoteContent
 							onSubmit={handleNoteSubmit}
@@ -487,38 +516,14 @@ export function AddDocument({
 							: "justify-between gap-2 pt-3",
 					)}
 				>
-					{isMobile && (
-						<div className="flex h-10 w-full shrink-0 items-center overflow-hidden rounded-full border border-[#1F2937] bg-[#0D121A] p-1">
-							{tabs.map((tab) => (
-								<TabButton
-									key={tab.id}
-									active={activeTab === tab.id}
-									onClick={() => setActiveTab(tab.id)}
-									icon={tab.icon}
-									title={tab.title}
-									compactLabel={tab.compactLabel}
-									description={tab.description}
-									isPro={tab.isPro}
-									compact
-								/>
-							))}
-						</div>
-					)}
-					{!isMobile && (
-						<SpaceSelector
-							selectedProjects={[localSelectedProject]}
-							onValueChange={(projects) =>
-								setLocalSelectedProject(projects[0] ?? localSelectedProject)
-							}
-							variant="insideOut"
-						/>
-					)}
+					{!isMobile && spaceSelector}
 					<div
 						className={cn(
 							"flex items-center gap-2",
 							isMobile ? "w-full" : "justify-end",
 						)}
 					>
+						{isMobile && spaceSelector}
 						{!isMobile && (
 							<Button
 								variant="ghost"
@@ -536,7 +541,7 @@ export function AddDocument({
 								disabled={
 									activeTab === "file" ? fileTabSubmitDisabled : isSubmitting
 								}
-								className={cn(isMobile && "h-12 w-full px-5 text-[15px]")}
+								className={cn(isMobile && "h-12 flex-1 px-5 text-[15px]")}
 							>
 								{isSubmitting ? (
 									<>