fix: nav mobile layout + container width alignment

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-20 14:44:53 +01:00
parent 3c903bad97
commit e66a55a8db
4 changed files with 44 additions and 20 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 ## [Unreleased]

 ### Fixed
+- Nav: hamburger button was trapped inside `.nav-links--right`; parent `display: none` on mobile hid it too — moved hamburger to be first child of `.nav-inner`; sign-in button added as always-visible mobile slot (`.nav-auth-mobile`) on the right; mobile grid is now `auto 1fr auto` (hamburger | logo | sign-in)
+- Nav: align `.nav-inner` width with `container-page` — changed `max-width` from 80rem to 72rem (`--container-6xl`) and matched responsive padding (`1rem` / `1.5rem` / `2rem` at mobile / sm / lg) so nav edges are flush with page content and footer
 - Planner: "Get Supplier Quotes" button now navigates to the correct lang-prefixed URL (`/en/leads/quote` etc.) — hardcoded `/leads/quote` caused a 404 on prod; URL is now injected from the server via `window.__PADELNOMICS_QUOTE_URL__`

 ### Added
--- a/padelnomics/src/padelnomics/public/templates/imprint_de.html
+++ b/padelnomics/src/padelnomics/public/templates/imprint_de.html
@@ -19,8 +19,9 @@
        <h2 class="text-lg mb-2">Anbieter</h2>
        <p>
          Hendrik Dreesmann<br>
-          Zum Offizierskasino 1<br>
-          26127 Oldenburg<br>
+          c/o COCENTER<br>
+          Koppoldstr. 1<br>
+          86551 Aichach<br>
          Deutschland
        </p>
      </section>
@@ -39,7 +40,7 @@
        <h2 class="text-lg mb-2">Verantwortlicher für den Inhalt</h2>
        <p>
          Hendrik Dreesmann<br>
-          Zum Offizierskasino 1, 26127 Oldenburg
+          c/o COCENTER, Koppoldstr. 1, 86551 Aichach
        </p>
        <p class="mt-1 text-sm text-slate">(gemäß § 18 Abs. 2 MStV)</p>
      </section>
--- a/padelnomics/src/padelnomics/static/css/input.css
+++ b/padelnomics/src/padelnomics/static/css/input.css
@@ -113,17 +113,23 @@
    border-bottom: 1px solid #E2E8F0;
  }
  .nav-inner {
-    max-width: 80rem;
+    max-width: 72rem; /* matches container-page (max-w-6xl) */
    margin: 0 auto;
-    padding: 0 1.5rem;
+    padding: 0 1rem; /* matches px-4 (mobile) */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 56px;
  }
+  @media (min-width: 640px) {
+    .nav-inner { padding-inline: 1.5rem; } /* matches sm:px-6 */
+  }
+  @media (min-width: 1024px) {
+    .nav-inner { padding-inline: 2rem; } /* matches lg:px-8 */
+  }
  .nav-logo {
    flex-shrink: 0;
-    padding: 0 1.25rem;
+    padding: 0 1rem; /* 16px, matches Zillow logo left/right padding */
  }
  .nav-links {
    display: flex;
@@ -172,7 +178,7 @@
    padding: 0;
    display: inline;
  }
-  /* Hamburger button — hidden on desktop */
+  /* Hamburger button — hidden on desktop, shown on mobile (left) */
  .nav-hamburger {
    display: none;
    align-items: center;
@@ -188,6 +194,13 @@
  }
  .nav-hamburger:hover { background: #F1F5F9; }
  .nav-hamburger svg { display: block; }
+  /* Mobile-only auth slot (right side) — hidden on desktop */
+  .nav-auth-mobile {
+    display: none;
+    align-items: center;
+    justify-content: flex-end;
+    min-width: 36px; /* mirrors hamburger width so logo stays centred when empty */
+  }
  /* Mobile menu panel — hidden by default */
  .nav-mobile {
    display: none;
@@ -248,7 +261,10 @@
  @media (max-width: 899px) {
    .nav-links { display: none; }
    .nav-hamburger { display: flex; }
+    .nav-auth-mobile { display: flex; }
+    /* Mobile grid: [hamburger] [logo] [sign-in] — hamburger left, sign-in right */
    .nav-inner { grid-template-columns: auto 1fr auto; }
+    .nav-logo { justify-self: center; }
    .nav-bar { position: sticky; }
  }

--- a/padelnomics/src/padelnomics/templates/base.html
+++ b/padelnomics/src/padelnomics/templates/base.html
@@ -40,13 +40,22 @@
 <body>
  <nav class="nav-bar" id="main-nav">
    <div class="nav-inner">
-      <!-- Left: demand / buy side -->
+      <!-- Hamburger (mobile only, left side) — outside .nav-links so it's never hidden by the parent -->
+      <button type="button" class="nav-hamburger" id="nav-hamburger-btn" aria-label="Open navigation" aria-expanded="false">
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+          <rect y="3" width="20" height="2" rx="1" fill="#0F172A"/>
+          <rect y="9" width="20" height="2" rx="1" fill="#0F172A"/>
+          <rect y="15" width="20" height="2" rx="1" fill="#0F172A"/>
+        </svg>
+      </button>
+
+      <!-- Left: demand / buy side (desktop only) -->
      <div class="nav-links nav-links--left">
        <a href="{{ url_for('planner.index') }}">{{ t.nav_planner }}</a>
        <a href="{{ url_for('leads.quote_request') }}">{{ t.nav_quotes }}</a>
      </div>

-      <!-- Center: logo -->
+      <!-- Center: logo (always visible) -->
      <a href="{{ url_for('public.landing') }}" class="nav-logo" style="display:inline-flex;align-items:center;text-decoration:none">
        <span style="font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.125rem;color:#0F172A;letter-spacing:-0.02em">padelnomics</span>
      </a>
@@ -88,19 +97,17 @@
        {% else %}
        <a href="{{ url_for('auth.login') }}" class="nav-auth-btn">{{ t.nav_signin }}</a>
        {% endif %}
+      </div>

-        <!-- Hamburger (mobile only) -->
-        <button type="button" class="nav-hamburger" id="nav-hamburger-btn" aria-label="Open navigation" aria-expanded="false">
-          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
-            <rect y="3" width="20" height="2" rx="1" fill="#0F172A"/>
-            <rect y="9" width="20" height="2" rx="1" fill="#0F172A"/>
-            <rect y="15" width="20" height="2" rx="1" fill="#0F172A"/>
-          </svg>
-        </button>
+      <!-- Mobile-only auth (right side) — sign-in always visible outside the hamburger menu -->
+      <div class="nav-auth-mobile">
+        {% if not user %}
+        <a href="{{ url_for('auth.login') }}" class="nav-auth-btn">{{ t.nav_signin }}</a>
+        {% endif %}
      </div>
    </div>

-    <!-- Mobile menu panel -->
+    <!-- Mobile menu panel — sign-in excluded (it lives in the bar); account section shown only for logged-in users -->
    <div class="nav-mobile" id="nav-mobile-panel">
      <span class="nav-mobile-section">Plan</span>
      <a href="{{ url_for('planner.index') }}">{{ t.nav_planner }}</a>
@@ -122,8 +129,6 @@
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <button type="submit" class="nav-auth-btn">{{ t.nav_signout }}</button>
      </form>
-      {% else %}
-      <a href="{{ url_for('auth.login') }}" class="nav-auth-btn" style="margin-top:0.5rem">{{ t.nav_signin }}</a>
      {% endif %}
    </div>
  </nav>