From d8a9e9fd0a457bb6d8163c32eaea28460ebe2d53 Mon Sep 17 00:00:00 2001
From: robin <robin@fluffigewolke.de>
Date: Mon, 19 Jan 2026 23:21:32 +0100
Subject: [PATCH] fix: Make header responsive on mobile

- Add flex-wrap to header right section
- Hide LanguageSwitcher on small screens (hidden sm:block)
- Replace logout text with Settings icon button
- Add shrink-0 to prevent logo compression
- Reduce gaps on mobile (gap-1 sm:gap-2)
---
 next-env.d.ts    |  2 +-
 src/app/page.tsx | 19 +++++++++++--------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/next-env.d.ts b/next-env.d.ts
index 9edff1c..c4b7818 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6ffa8e1..dea1b27 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -190,8 +190,8 @@ export default function Home() {
             <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">
-                        <div className="flex flex-col">
+                    <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>
@@ -203,21 +203,24 @@ export default function Home() {
                                     </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 className="hidden sm:inline">Live:</span> {activeSession.name}
                                     </span>
                                 </div>
                             )}
                         </div>
-                        <div className="flex items-center gap-2">
+                        <div className="flex items-center gap-1 sm:gap-2 flex-wrap justify-end">
                             <UserStatusBadge />
                             <OfflineIndicator />
-                            <LanguageSwitcher />
+                            <div className="hidden sm:block">
+                                <LanguageSwitcher />
+                            </div>
                             <DramOfTheDay bottles={bottles} />
                             <button
-                                onClick={handleLogout}
-                                className="text-[9px] font-bold uppercase tracking-widest text-zinc-600 hover:text-white transition-colors"
+                                onClick={() => router.push('/settings')}
+                                className="p-2 text-zinc-500 hover:text-white transition-colors"
+                                aria-label="Settings"
                             >
-                                {t('home.logout')}
+                                <Settings size={18} />
                             </button>
                         </div>
                     </div>