indifferentketchup/boocode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(mobile): rework Session and Project headers for narrow viewports

Browse Source 
Session header: breadcrumb (Projects > project) wrapped in
hidden sm:flex; active file path hidden on mobile; session name cap
max-w-[140px] sm:max-w-[280px]; padding px-3 sm:px-4. Mobile gets
just hamburger | session name | model pill.

Project header: px-3 sm:px-6, py-2 sm:py-3, heading text-base
sm:text-lg, project path hidden sm:block, "New session" button is
icon-only on mobile via <span className="hidden sm:inline">. Both
headers retain the safe-area-inset-top padding from v1.6.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
indifferentketchup
2026-05-16 06:36:36 +00:00
parent f6c7e12dbf
commit e167f851fd
2 changed files with 42 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
apps/web/src/pages/Project.tsx
View File

@@ -81,32 +81,32 @@ export function Project() {
return (
<div className="flex-1 flex flex-col">
<header
className="border-b px-6 py-3 flex items-center justify-between gap-2"
style={{ paddingTop: 'max(0.75rem, env(safe-area-inset-top))' }}
className="border-b px-3 sm:px-6 py-2 sm:py-3 flex items-center justify-between gap-2"
style={{ paddingTop: 'max(0.5rem, env(safe-area-inset-top))' }}
>
<div className="flex items-center gap-2 min-w-0">
{isMobile && (
<button
type="button"
onClick={() => setDrawerOpen(true)}
className="inline-flex items-center justify-center -ml-2 min-w-[44px] min-h-[44px] rounded text-muted-foreground hover:bg-muted hover:text-foreground shrink-0"
className="inline-flex items-center justify-center -ml-1 min-w-[44px] min-h-[44px] rounded text-muted-foreground hover:bg-muted hover:text-foreground shrink-0"
aria-label="Open sidebar"
>
<Menu className="size-5" />
</button>
)}
<div className="min-w-0">
<h1 className="text-lg font-semibold tracking-tight truncate">
<h1 className="text-base sm:text-lg font-semibold tracking-tight truncate">
{project?.name ?? '…'}
</h1>
<div className="text-xs text-muted-foreground font-mono truncate">
<div className="text-xs text-muted-foreground font-mono truncate hidden sm:block">
{project?.path}
</div>
</div>
</div>
<Button onClick={handleNew} disabled={creating} className="shrink-0">
<Button onClick={handleNew} disabled={creating} className="shrink-0" aria-label="New session">
<Plus />
New session
<span className="hidden sm:inline">New session</span>
</Button>
</header>