Skip to content

Commit f6a424e

Browse files
meirk-brdmeirk-brd
committed
support mobile view
1 parent 1522e61 commit f6a424e

3 files changed

Lines changed: 54 additions & 13 deletions

File tree

‎app/globals.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -216,7 +216,7 @@ body {
216216
color: var(--foreground);
217217
font-family: var(--font-sans);
218218
margin: 0;
219-
min-height: 100vh;
219+
min-height: 100dvh;
220220
overflow: hidden;
221221
transition: background-color var(--transition-slow), color var(--transition-slow);
222222
-webkit-font-smoothing: antialiased;

‎app/layout.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ export default function RootLayout({
3636
return (
3737
<html lang="en" suppressHydrationWarning>
3838
<head>
39+
<meta name="viewport" content="width=device-width, initial-scale=1" />
3940
<script dangerouslySetInnerHTML={{ __html: themeScript }} />
4041
{/* Google Analytics */}
4142
<script async src="https://www.googletagmanager.com/gtag/js?id=G-SDGRVMER2G" />

‎components/sovereign-dashboard.tsx‎

Lines changed: 52 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,7 @@ export function SovereignDashboard({ demoMode = false }: { demoMode?: boolean }
216216
const [showWsPicker, setShowWsPicker] = useState(false);
217217
const [showScoreInfo, setShowScoreInfo] = useState(false);
218218
const [showDemoModal, setShowDemoModal] = useState(false);
219+
const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
219220

220221

221222
/** Load workspaces on mount */
@@ -1011,7 +1012,7 @@ Requirements:
10111012
}
10121013

10131014
return (
1014-
<div className="flex h-screen overflow-hidden text-th-text" style={{ background: "var(--bg-deep)" }}>
1015+
<div className="flex h-[100dvh] overflow-hidden text-th-text" style={{ background: "var(--bg-deep)" }}>
10151016
{/* ── Rate limit modal ───────────────────────────────── */}
10161017
{showDemoModal && <DemoLimitModal onClose={() => setShowDemoModal(false)} />}
10171018

@@ -1021,18 +1022,44 @@ Requirements:
10211022
<div className="absolute inset-0 bd-bg-grid opacity-100" />
10221023
</div>
10231024

1024-
{/* ── Fixed sidebar ──────────────────────────────────── */}
1025-
<aside className="relative z-10 flex w-[252px] shrink-0 flex-col border-r border-[var(--border-subtle)] bg-[var(--bg-elevated)]" style={{ backdropFilter: "blur(12px)" }}>
1025+
{/* ── Mobile sidebar backdrop ────────────────────────── */}
1026+
{mobileSidebarOpen && (
1027+
<div
1028+
className="fixed inset-0 z-20 bg-black/60 md:hidden"
1029+
onClick={() => setMobileSidebarOpen(false)}
1030+
/>
1031+
)}
1032+
1033+
{/* ── Sidebar (drawer on mobile, fixed on desktop) ───── */}
1034+
<aside
1035+
className={`
1036+
fixed inset-y-0 left-0 z-30 flex w-[252px] shrink-0 flex-col border-r border-[var(--border-subtle)] bg-[var(--bg-elevated)]
1037+
transition-transform duration-300
1038+
${mobileSidebarOpen ? "translate-x-0" : "-translate-x-full"}
1039+
md:relative md:translate-x-0 md:z-10
1040+
`}
1041+
style={{ backdropFilter: "blur(12px)" }}
1042+
>
10261043
{/* Brand / Workspace switcher */}
10271044
<div className="border-b border-[var(--border-subtle)] px-4 py-3">
10281045
{/* Logo row */}
10291046
<div className="flex items-center gap-2 mb-3">
10301047
<img src={`${BASE_PATH}/brightdata-logo.svg`} alt="Bright Data" className="h-5 w-auto" />
10311048
{demoMode && (
1032-
<span className="ml-auto px-1.5 py-0.5 rounded text-[10px] font-medium bg-white/8 text-[var(--text-tertiary)] border border-[var(--border-subtle)]">
1049+
<span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-white/8 text-[var(--text-tertiary)] border border-[var(--border-subtle)]">
10331050
Demo
10341051
</span>
10351052
)}
1053+
{/* Close button — mobile only */}
1054+
<button
1055+
onClick={() => setMobileSidebarOpen(false)}
1056+
className="ml-auto flex md:hidden items-center justify-center w-7 h-7 rounded-md text-[var(--text-disabled)] hover:text-white hover:bg-white/8 transition-colors"
1057+
aria-label="Close menu"
1058+
>
1059+
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
1060+
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
1061+
</svg>
1062+
</button>
10361063
</div>
10371064
{demoMode ? (
10381065
<div className="flex items-center gap-2 px-2 py-1.5 rounded-lg bg-[var(--accent-primary-muted)] border border-[var(--border-accent)]">
@@ -1128,7 +1155,7 @@ Requirements:
11281155
)}
11291156
<button
11301157
title={tabMeta[tab].tooltip}
1131-
onClick={() => setActiveTab(tab)}
1158+
onClick={() => { setActiveTab(tab); setMobileSidebarOpen(false); }}
11321159
className={`bd-nav-item mb-0.5 ${active ? "active" : ""}`}
11331160
>
11341161
<span className={`shrink-0 bd-nav-icon ${active ? "text-[var(--accent-primary)]" : "text-[var(--text-disabled)]"}`}>
@@ -1177,10 +1204,23 @@ Requirements:
11771204
)}
11781205

11791206
{/* Toolbar */}
1180-
<header className="flex shrink-0 items-center gap-2 border-b border-[var(--border-subtle)] bg-[var(--bg-elevated)]/80 px-5 py-2.5" style={{ backdropFilter: "blur(12px)" }}>
1207+
<header className="flex shrink-0 flex-wrap items-center gap-2 border-b border-[var(--border-subtle)] bg-[var(--bg-elevated)]/80 px-3 py-2.5 md:px-5" style={{ backdropFilter: "blur(12px)" }}>
1208+
{/* Hamburger — mobile only */}
1209+
<button
1210+
onClick={() => setMobileSidebarOpen(true)}
1211+
className="flex md:hidden items-center justify-center w-8 h-8 rounded-md text-[var(--text-tertiary)] hover:text-white hover:bg-white/8 transition-colors"
1212+
aria-label="Open menu"
1213+
>
1214+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
1215+
<line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/>
1216+
</svg>
1217+
</button>
1218+
11811219
<h1 className="mr-auto text-sm font-semibold text-white">{tabMeta[activeTab].title}</h1>
1182-
<span className="text-[10px] font-semibold uppercase tracking-widest text-[var(--text-disabled)]">Models</span>
1220+
1221+
{/* Models row — wraps on small screens */}
11831222
<div className="flex flex-wrap items-center gap-1">
1223+
<span className="text-[10px] font-semibold uppercase tracking-widest text-[var(--text-disabled)] hidden sm:inline">Models</span>
11841224
{ALL_PROVIDERS.map((p) => {
11851225
const active = state.activeProviders.includes(p);
11861226
return (
@@ -1221,18 +1261,18 @@ Requirements:
12211261
</div>
12221262

12231263
{/* Status chip */}
1224-
<span className={`flex items-center gap-1.5 rounded-md px-2.5 py-1 text-[11px] transition-all ${
1264+
<span className={`flex items-center gap-1.5 rounded-md px-2.5 py-1 text-[11px] transition-all max-w-[160px] sm:max-w-none truncate ${
12251265
busy
12261266
? "bg-[var(--accent-primary-muted)] text-[var(--accent-primary)] border border-[var(--border-accent)]"
12271267
: "bg-white/5 text-[var(--text-tertiary)] border border-[var(--border-subtle)]"
12281268
}`}>
1229-
{busy && <span className="bd-dot-live" style={{ width: 6, height: 6 }} />}
1230-
{message || "Ready"}
1269+
{busy && <span className="bd-dot-live shrink-0" style={{ width: 6, height: 6 }} />}
1270+
<span className="truncate">{message || "Ready"}</span>
12311271
</span>
12321272
</header>
12331273

12341274
{/* Scrollable body */}
1235-
<main className="flex-1 overflow-y-auto px-5 py-4" style={{ background: "transparent" }}>
1275+
<main className="flex-1 overflow-y-auto px-3 py-3 md:px-5 md:py-4" style={{ background: "transparent" }}>
12361276
{/* Brand not configured warning */}
12371277
{!demoMode && state.runs.length > 0 && !state.brand.brandName.trim() && (
12381278
<div className="mb-4 flex items-center gap-3 rounded-xl border border-[var(--accent-error-muted)] bg-[var(--accent-error-muted)] px-4 py-3 text-sm text-[var(--accent-error)]">
@@ -1340,7 +1380,7 @@ Requirements:
13401380
)}
13411381

13421382
{/* Active tab panel */}
1343-
<section className="rounded-xl border border-[var(--border-default)] p-5" style={{ background: "var(--surface-card)", backdropFilter: "blur(8px)" }}>
1383+
<section className="rounded-xl border border-[var(--border-default)] p-3 md:p-5" style={{ background: "var(--surface-card)", backdropFilter: "blur(8px)" }}>
13441384
{renderActiveTab()}
13451385
</section>
13461386
<section className="mt-3 rounded-lg border border-[var(--border-subtle)] px-4 py-3" style={{ background: "var(--surface-card)" }}>

0 commit comments

Comments
 (0)