From 60333c5074952eb152303dc2e5dca3e912b025b3 Mon Sep 17 00:00:00 2001
From: Mahesh Sanikommu <mahesh.svmr@gmail.com>
Date: Tue, 26 May 2026 02:51:59 -0700
Subject: [PATCH] Fix mobile space switching in add-content drawer (#1009)

Co-authored-by: claude[bot] <41898282+claude[bot]@users.noreply.github.com>
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
---
 apps/web/components/add-document/file.tsx  |  9 ++--
 apps/web/components/add-document/index.tsx | 61 ++++++++++++----------
 2 files changed, 39 insertions(+), 31 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..22b87e09 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,6 +457,23 @@ export function AddDocument({
 					isMobile ? "w-full px-4 pt-1" : "w-2/3 px-1",
 				)}
 			>
+				{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
@@ -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 ? (
 									<>