From 63db1a0f903b284259aafa06526017e2a6d54620 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Sun, 25 Oct 2026 01:30:10 +0200
Subject: [PATCH] fix(nav): move borderless help button to tab navigation bar

---
 frontend/src/App.tsx | 30 ++++++++++++++++++------------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 90b65d7..4e937f1 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -428,21 +428,11 @@ export const App: React.FC = () => {
               </div>
             )}
           </div>
-
-          {/* Circled Question Mark Help Button (Rechtsbündig) */}
-          <button
-            type="button"
-            onClick={handleOpenHelp}
-            className="w-7 h-7 rounded-full border border-border hover:border-strong bg-panel hover:bg-panel-elevated text-muted hover:text-main flex items-center justify-center transition-colors flex-shrink-0"
-            title="Hilfe & Dokumentation"
-          >
-            <HelpCircle className="w-4 h-4 text-muted hover:text-main" />
-          </button>
         </div>
 
         {/* Navigation tabs attached to header */}
-        <nav className="max-w-6xl mx-auto px-1 sm:px-2 overflow-x-auto no-scrollbar border-t border-border">
-          <div className="flex items-stretch">
+        <nav className="max-w-6xl mx-auto px-1 sm:px-2 border-t border-border flex items-stretch justify-between">
+          <div className="flex items-stretch overflow-x-auto no-scrollbar">
             <button
               onClick={() => {
                 triggerHaptic(10);
@@ -518,6 +508,22 @@ export const App: React.FC = () => {
               <span>Geteilte Listen</span>
             </button>
           </div>
+
+          {/* Borderless Circled Question Mark Help Button in Tab Bar */}
+          <div className="flex items-center pr-2 flex-shrink-0">
+            <button
+              type="button"
+              onClick={handleOpenHelp}
+              className={`p-1.5 transition-colors cursor-pointer rounded-full ${
+                activeTab === 'help'
+                  ? 'text-accent'
+                  : 'text-muted hover:text-main'
+              }`}
+              title="Hilfe & Dokumentation"
+            >
+              <HelpCircle className="w-4 h-4" />
+            </button>
+          </div>
         </nav>
       </header>