From d189bb5af4ea7d632aead1ccca066b32957aa18b Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Tue, 21 Jul 2026 16:47:02 +0200
Subject: [PATCH] fix: mobile responsive improvements

- Audit: responsive summary cards (grid-cols-2 mobile, p-3), responsive empty states
- Repair-icons/sync-all: log area horizontal scroll (overflow-x-auto, whitespace-nowrap)
- Upload furni: tighter mobile padding (p-4 sm:p-5)
- Nitro client: compact toolbar on mobile (smaller buttons, tighter gap, top-2/left-2)
---
 src/app/admin/import/audit/audit-client.tsx   |  34 +++--
 .../furni/upload/upload-furni-client.tsx      |   2 +-
 .../repair-icons/repair-icons-client.tsx      |   7 +-
 src/app/admin/import/sync/sync-all-client.tsx |   7 +-
 src/app/client/client-view.tsx                | 134 +++++++++---------
 5 files changed, 97 insertions(+), 87 deletions(-)

diff --git a/src/app/admin/import/audit/audit-client.tsx b/src/app/admin/import/audit/audit-client.tsx
index a4e6a2db..cb74d978 100644
--- a/src/app/admin/import/audit/audit-client.tsx
+++ b/src/app/admin/import/audit/audit-client.tsx
@@ -223,15 +223,17 @@ export function AuditClient() {
 			{summary && (
 				<>
 					{/* Summary cards */}
-					<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
-						<div className="rounded-xl border bg-card p-4 space-y-1">
-							<div className="text-2xl font-bold">{summary.totalItemsBase}</div>
+					<div className="grid gap-3 grid-cols-2 sm:grid-cols-4">
+						<div className="rounded-xl border bg-card p-3 sm:p-4 space-y-1">
+							<div className="text-xl sm:text-2xl font-bold">
+								{summary.totalItemsBase}
+							</div>
 							<div className="text-xs text-muted-foreground">
 								items_base entries
 							</div>
 						</div>
-						<div className="rounded-xl border bg-card p-4 space-y-1">
-							<div className="text-2xl font-bold">
+						<div className="rounded-xl border bg-card p-3 sm:p-4 space-y-1">
+							<div className="text-xl sm:text-2xl font-bold">
 								{summary.totalCatalogItems}
 							</div>
 							<div className="text-xs text-muted-foreground">
@@ -239,20 +241,20 @@ export function AuditClient() {
 							</div>
 						</div>
 						<div
-							className={`rounded-xl border p-4 space-y-1 ${errors.length > 0 ? "border-[var(--admin-error-border)] bg-[var(--admin-error-subtle)]" : "bg-card"}`}
+							className={`rounded-xl border p-3 sm:p-4 space-y-1 ${errors.length > 0 ? "border-[var(--admin-error-border)] bg-[var(--admin-error-subtle)]" : "bg-card"}`}
 						>
 							<div
-								className={`text-2xl font-bold ${errors.length > 0 ? "text-[var(--admin-error)]" : ""}`}
+								className={`text-xl sm:text-2xl font-bold ${errors.length > 0 ? "text-[var(--admin-error)]" : ""}`}
 							>
 								{errors.length}
 							</div>
 							<div className="text-xs text-muted-foreground">Errors</div>
 						</div>
 						<div
-							className={`rounded-xl border p-4 space-y-1 ${warnings.length > 0 ? "border-[var(--admin-warning-border)] bg-[var(--admin-warning-subtle)]" : "bg-card"}`}
+							className={`rounded-xl border p-3 sm:p-4 space-y-1 ${warnings.length > 0 ? "border-[var(--admin-warning-border)] bg-[var(--admin-warning-subtle)]" : "bg-card"}`}
 						>
 							<div
-								className={`text-2xl font-bold ${warnings.length > 0 ? "text-[var(--admin-warning)]" : ""}`}
+								className={`text-xl sm:text-2xl font-bold ${warnings.length > 0 ? "text-[var(--admin-warning)]" : ""}`}
 							>
 								{warnings.length}
 							</div>
@@ -383,7 +385,7 @@ export function AuditClient() {
 													{TYPE_LABELS[issue.type] || issue.type}
 												</span>
 												{issue.classname && (
-													<code className="text-xs bg-background/50 px-1.5 py-0.5 rounded font-mono">
+													<code className="text-xs bg-background/50 px-1.5 py-0.5 rounded font-mono break-all max-w-[200px]">
 														{issue.classname}
 													</code>
 												)}
@@ -425,9 +427,11 @@ export function AuditClient() {
 					{activeTab === "issues" &&
 						issues.length === 0 &&
 						missingFromSources.length === 0 && (
-							<div className="rounded-xl border bg-card p-12 text-center text-muted-foreground">
-								<CheckCircle2 className="w-12 h-12 mx-auto mb-3 text-[var(--admin-success)]" />
-								<p className="text-lg font-medium">No issues found</p>
+							<div className="rounded-xl border bg-card p-6 sm:p-12 text-center text-muted-foreground">
+								<CheckCircle2 className="w-10 h-10 sm:w-12 sm:h-12 mx-auto mb-3 text-[var(--admin-success)]" />
+								<p className="text-base sm:text-lg font-medium">
+									No issues found
+								</p>
 								<p className="text-sm">Your catalog is clean!</p>
 							</div>
 						)}
@@ -448,8 +452,8 @@ export function AuditClient() {
 			)}
 
 			{!loading && !summary && (
-				<div className="rounded-xl border bg-card p-12 text-center text-muted-foreground">
-					<SearchX className="w-12 h-12 mx-auto mb-3 opacity-40" />
+				<div className="rounded-xl border bg-card p-6 sm:p-12 text-center text-muted-foreground">
+					<SearchX className="w-10 h-10 sm:w-12 sm:h-12 mx-auto mb-3 opacity-40" />
 					<p>
 						Run a full audit to check for missing catalog entries, broken
 						references, missing files, and items available from clone sources.
diff --git a/src/app/admin/import/furni/upload/upload-furni-client.tsx b/src/app/admin/import/furni/upload/upload-furni-client.tsx
index 7e39db78..1ab3e028 100644
--- a/src/app/admin/import/furni/upload/upload-furni-client.tsx
+++ b/src/app/admin/import/furni/upload/upload-furni-client.tsx
@@ -108,7 +108,7 @@ export function UploadFurniClient() {
 		<div className="space-y-6">
 			{!result ? (
 				<form onSubmit={handleSubmit} className="space-y-6">
-					<div className="rounded-xl border bg-card p-5 space-y-5">
+					<div className="rounded-xl border bg-card p-4 sm:p-5 space-y-5">
 						<div className="text-sm font-medium">Furniture Details</div>
 
 						<div className="grid gap-4 sm:grid-cols-2">
diff --git a/src/app/admin/import/repair-icons/repair-icons-client.tsx b/src/app/admin/import/repair-icons/repair-icons-client.tsx
index c126c305..a0a3bd3d 100644
--- a/src/app/admin/import/repair-icons/repair-icons-client.tsx
+++ b/src/app/admin/import/repair-icons/repair-icons-client.tsx
@@ -160,9 +160,12 @@ export function RepairIconsClient() {
 			)}
 
 			{log.length > 0 && (
-				<div className="rounded-xl border bg-card p-4 max-h-80 overflow-y-auto space-y-0.5">
+				<div className="rounded-xl border bg-card p-4 max-h-80 overflow-x-auto overflow-y-auto space-y-0.5">
 					{log.map((line) => (
-						<div key={line} className="text-xs font-mono text-muted-foreground">
+						<div
+							key={line}
+							className="text-xs font-mono text-muted-foreground whitespace-nowrap"
+						>
 							{line}
 						</div>
 					))}
diff --git a/src/app/admin/import/sync/sync-all-client.tsx b/src/app/admin/import/sync/sync-all-client.tsx
index 3eba9b0b..4c546615 100644
--- a/src/app/admin/import/sync/sync-all-client.tsx
+++ b/src/app/admin/import/sync/sync-all-client.tsx
@@ -147,9 +147,12 @@ export function SyncAllClient() {
 			)}
 
 			{log.length > 0 && (
-				<div className="rounded-xl border bg-card p-4 max-h-80 overflow-y-auto space-y-0.5">
+				<div className="rounded-xl border bg-card p-4 max-h-80 overflow-x-auto overflow-y-auto space-y-0.5">
 					{log.map((line) => (
-						<div key={line} className="text-xs font-mono text-muted-foreground">
+						<div
+							key={line}
+							className="text-xs font-mono text-muted-foreground whitespace-nowrap"
+						>
 							{line}
 						</div>
 					))}
diff --git a/src/app/client/client-view.tsx b/src/app/client/client-view.tsx
index 6630391b..0e9874c6 100644
--- a/src/app/client/client-view.tsx
+++ b/src/app/client/client-view.tsx
@@ -15,7 +15,7 @@ function ToolbarBtn({
 	href?: string;
 }) {
 	const cls =
-		"w-10 h-10 rounded-lg border-2 cursor-pointer flex items-center justify-center shadow-lg transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl active:translate-y-0";
+		"w-9 h-9 sm:w-10 sm:h-10 rounded-lg border-2 cursor-pointer flex items-center justify-center shadow-lg transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl active:translate-y-0";
 	const style = {
 		borderColor: "color-mix(in srgb, var(--color-primary, #eeb425) 75%, black)",
 		background:
@@ -94,63 +94,63 @@ export function ClientView({
 			className="relative w-screen h-screen overflow-hidden"
 			style={{ backgroundColor: "var(--color-background)" }}
 		>
-			<div className="fixed top-4 left-4 z-50 flex items-center gap-2">
+			<div className="fixed top-2 sm:top-4 left-2 sm:left-4 z-50 flex items-center gap-1 sm:gap-2">
 				<ToolbarBtn href="/" title="Home">
-				<svg
-					width="18"
-					height="18"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					strokeWidth="2"
-					strokeLinecap="round"
-					strokeLinejoin="round"
-					role="img"
-					aria-label="Home"
-				>
-					<title>Home</title>
-					<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
-					<polyline points="9 22 9 12 15 12 15 22" />
-				</svg>
+					<svg
+						width="18"
+						height="18"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+						role="img"
+						aria-label="Home"
+					>
+						<title>Home</title>
+						<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+						<polyline points="9 22 9 12 15 12 15 22" />
+					</svg>
 				</ToolbarBtn>
 				<ToolbarBtn onClick={() => window.location.reload()} title="Reload">
-				<svg
-					width="18"
-					height="18"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					strokeWidth="2"
-					strokeLinecap="round"
-					strokeLinejoin="round"
-					role="img"
-					aria-label="Reload"
-				>
-					<title>Reload</title>
-					<polyline points="23 4 23 10 17 10" />
-					<polyline points="1 20 1 14 7 14" />
-					<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
-				</svg>
+					<svg
+						width="18"
+						height="18"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+						role="img"
+						aria-label="Reload"
+					>
+						<title>Reload</title>
+						<polyline points="23 4 23 10 17 10" />
+						<polyline points="1 20 1 14 7 14" />
+						<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
+					</svg>
 				</ToolbarBtn>
 				<ToolbarBtn onClick={toggleFullscreen} title="Fullscreen">
-				<svg
-					width="18"
-					height="18"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					strokeWidth="2"
-					strokeLinecap="round"
-					strokeLinejoin="round"
-					role="img"
-					aria-label="Fullscreen"
-				>
-					<title>Fullscreen</title>
-					<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />
-				</svg>
+					<svg
+						width="18"
+						height="18"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+						role="img"
+						aria-label="Fullscreen"
+					>
+						<title>Fullscreen</title>
+						<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />
+					</svg>
 				</ToolbarBtn>
 				<div
-					className="h-10 px-3 rounded-lg border-2 flex items-center justify-center gap-1.5 shadow-lg select-none"
+					className="h-9 sm:h-10 px-2 sm:px-3 rounded-lg border-2 flex items-center justify-center gap-1 shadow-lg select-none"
 					style={{
 						borderColor:
 							"color-mix(in srgb, var(--color-primary, #eeb425) 75%, black)",
@@ -161,22 +161,22 @@ export function ClientView({
 					}}
 					title="Online users"
 				>
-				<svg
-					width="18"
-					height="18"
-					viewBox="0 0 24 24"
-					fill="none"
-					stroke="currentColor"
-					strokeWidth="2"
-					strokeLinecap="round"
-					strokeLinejoin="round"
-					role="img"
-					aria-label="Online users"
-				>
-					<title>Online users</title>
-					<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
-					<circle cx="12" cy="7" r="4" />
-				</svg>
+					<svg
+						width="18"
+						height="18"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+						role="img"
+						aria-label="Online users"
+					>
+						<title>Online users</title>
+						<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+						<circle cx="12" cy="7" r="4" />
+					</svg>
 					<span className="text-xs font-bold">{onlineCount}</span>
 				</div>
 			</div>