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

53
src/app/page.tsx
View File

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