robin/Dramlog-Prod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Two-row header layout for mobile

Browse Source 
- Row 1: Logo + Logout (always fits)
- Row 2: Session info (left) + Status badges (right)
- No more horizontal scrolling on mobile
This commit is contained in:
robin
2026-01-19 23:31:49 +01:00
parent 06fa208dd8
commit d75a30f459
1 changed files with 29 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/app/page.tsx
View File

@@ -184,34 +184,39 @@ export default function Home() {
{/* Scrollable Content Area */}
<div className="flex-1 overflow-y-auto pb-24">
{/* 1. Header */}
<header className="px-4 pt-4 pb-2">
<div className="flex items-center justify-between gap-2">
<div className="flex flex-col shrink-0">
<header className="px-4 pt-4 pb-2 space-y-2">
{/* Row 1: Logo + Logout */}
<div className="flex items-center justify-between">
<h1 className="text-2xl font-bold text-zinc-50 tracking-tighter">
DRAM<span className="text-orange-600">LOG</span>
</h1>
{activeSession && (
<div className="flex items-center gap-2 mt-0.5 animate-in fade-in slide-in-from-left-2 duration-700">
<button
onClick={handleLogout}
className="text-[10px] font-bold uppercase tracking-widest text-zinc-500 hover:text-white transition-colors"
>
{t('home.logout')}
</button>
</div>
{/* Row 2: Session info + Status */}
<div className="flex items-center justify-between">
{activeSession ? (
<div className="flex items-center gap-2 animate-in fade-in slide-in-from-left-2 duration-700">
<div className="relative flex h-2 w-2">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-orange-600 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-orange-600"></span>
</div>
<span className="text-[9px] font-bold uppercase tracking-widest text-orange-600 flex items-center gap-1">
<Sparkles size={10} className="animate-pulse" />
<span className="hidden sm:inline">Live:</span> {activeSession.name}
Live: {activeSession.name}
</span>
</div>
) : (
<div />
)}
</div>
<div className="flex items-center gap-2">
<UserStatusBadge />
<OfflineIndicator />
<button
onClick={handleLogout}
className="text-[9px] font-bold uppercase tracking-widest text-zinc-600 hover:text-white transition-colors whitespace-nowrap"
>
{t('home.logout')}
</button>
</div>
</div>
</header>