From a4794dc60cd53c6e0721970c025ac11f7b295163 Mon Sep 17 00:00:00 2001
From: christian <christian@dockly.de>
Date: Tue, 26 May 2026 14:44:58 +0000
Subject: [PATCH] fix(topnav): kein horizontaler Scroller mehr im
 Desktop-Header

- nav: overflow-x-auto raus, flex-1 raus, kompaktes gap-0.5
- NavBtn: nur Icon (groesser: 16px) auf md/lg, Label erst ab xl (>=1280px)
- title-Attribut fuer Tooltip beim Icon-Only-Mode
- Trennlinie zwischen Haupt- und Verwaltungs-Items kompakter
---
 src/components/Dashboard/TopNav.jsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/Dashboard/TopNav.jsx b/src/components/Dashboard/TopNav.jsx
index b080bb9..6c5272d 100644
--- a/src/components/Dashboard/TopNav.jsx
+++ b/src/components/Dashboard/TopNav.jsx
@@ -54,13 +54,13 @@ export default function TopNav({ user, activeView, setActiveView, onLogout }) {
         </div>
 
         {/* Desktop Nav */}
-        <nav className="hidden md:flex items-center gap-1 ml-4 flex-1 overflow-x-auto">
+        <nav className="hidden md:flex items-center gap-0.5 ml-2 lg:ml-4">
           {mainItems.map(it => (
             <NavBtn key={it.view} {...it} active={activeView === it.view} onClick={() => select(it.view)} />
           ))}
           {isAdmin && (
             <>
-              <div className="h-5 w-px bg-slate-200 mx-2 flex-shrink-0" />
+              <div className="h-5 w-px bg-slate-200 mx-1 xl:mx-2 flex-shrink-0" />
               {adminItems.map(it => (
                 <NavBtn key={it.view} {...it} active={activeView === it.view} onClick={() => select(it.view)} />
               ))}
@@ -68,7 +68,7 @@ export default function TopNav({ user, activeView, setActiveView, onLogout }) {
           )}
         </nav>
 
-        <div className="flex-1 md:hidden" />
+        <div className="flex-1" />
 
         {/* User Menu */}
         <div className="relative flex-shrink-0" ref={menuRef}>
@@ -140,10 +140,11 @@ export default function TopNav({ user, activeView, setActiveView, onLogout }) {
 
 function NavBtn({ icon: Icon, label, active, onClick }) {
   return (
-    <button onClick={onClick}
-            className={`inline-flex items-center gap-2 rounded-lg px-3 py-1.5 text-sm font-medium transition flex-shrink-0
+    <button onClick={onClick} title={label}
+            className={`inline-flex items-center gap-2 rounded-lg px-2 xl:px-3 py-1.5 text-sm font-medium transition flex-shrink-0
               ${active ? 'bg-brand-50 text-brand-900' : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900'}`}>
-      <Icon size={14} />{label}
+      <Icon size={16} />
+      <span className="hidden xl:inline">{label}</span>
     </button>
   );
 }