From d75a30f4592f3d717e2afdf2d3870c3c28d3ecb3 Mon Sep 17 00:00:00 2001
From: robin <robin@fluffigewolke.de>
Date: Mon, 19 Jan 2026 23:31:49 +0100
Subject: [PATCH] fix: Two-row header layout for mobile

- Row 1: Logo + Logout (always fits)
- Row 2: Session info (left) + Status badges (right)
- No more horizontal scrolling on mobile
---
 src/app/page.tsx | 53 ++++++++++++++++++++++++++----------------------
 1 file changed, 29 insertions(+), 24 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 15ed360..052c15b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -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">
-                            <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">
-                                    <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}
-                                    </span>
+                <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>
+                        <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>
-                            )}
-                        </div>
+                                <span className="text-[9px] font-bold uppercase tracking-widest text-orange-600 flex items-center gap-1">
+                                    <Sparkles size={10} className="animate-pulse" />
+                                    Live: {activeSession.name}
+                                </span>
+                            </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>