From d5a2721c5f6088605c83d83013f8873f0f975ad5 Mon Sep 17 00:00:00 2001
From: Florian Heinz <mail@hnz.io>
Date: Wed, 22 Apr 2026 00:01:27 +0200
Subject: [PATCH] fix: compact mobile bottom navigation

---
 app/static/css/app.css  | 37 +++++++++++++++++++++++++++++++++++--
 app/templates/base.html | 12 ++++++------
 2 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/app/static/css/app.css b/app/static/css/app.css
index cba2cd7..da12aac 100644
--- a/app/static/css/app.css
+++ b/app/static/css/app.css
@@ -717,11 +717,15 @@ h2 { font-size: 1.2rem; margin-bottom: 0; }
 
   .bottom-nav {
     position: fixed;
-    inset: auto 12px 12px 12px;
+    left: max(8px, env(safe-area-inset-left));
+    right: max(8px, env(safe-area-inset-right));
+    bottom: calc(8px + env(safe-area-inset-bottom));
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 8px;
     padding: 10px;
+    max-width: 540px;
+    margin: 0 auto;
     background: var(--panel);
     border: 1px solid var(--line);
     border-radius: 24px;
@@ -733,10 +737,18 @@ h2 { font-size: 1.2rem; margin-bottom: 0; }
     display: grid;
     justify-items: center;
     gap: 6px;
+    min-width: 0;
     text-align: center;
-    font-size: 0.82rem;
+    font-size: 0.76rem;
+    line-height: 1.1;
     padding: 10px 6px;
     border-radius: 16px;
+    overflow-wrap: anywhere;
+  }
+
+  .bottom-nav a span {
+    display: inline-block;
+    max-width: 100%;
   }
 
   .mobile-theme-toggle {
@@ -784,6 +796,27 @@ h2 { font-size: 1.2rem; margin-bottom: 0; }
   }
 }
 
+@media (max-width: 560px) {
+  .content {
+    padding: 18px 14px 104px;
+  }
+
+  .bottom-nav {
+    gap: 4px;
+    padding: 8px;
+    border-radius: 20px;
+  }
+
+  .bottom-nav a {
+    font-size: 0.68rem;
+    padding: 8px 4px;
+  }
+
+  .bottom-nav a span {
+    display: none;
+  }
+}
+
 .planning-hero-strong {
   padding-bottom: 6px;
 }
diff --git a/app/templates/base.html b/app/templates/base.html
index 09f048f..d1bdeb6 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -76,14 +76,14 @@
     </div>
     {% if current_user.is_authenticated %}
       <nav class="bottom-nav">
-        <a href="{{ url_for('main.index') }}"><img src="{{ url_for('static', filename='icons/house.svg') }}" alt="" class="ui-icon">Übersicht</a>
-        <a href="{{ url_for('planning.current') }}"><img src="{{ url_for('static', filename='icons/wallet.svg') }}" alt="" class="ui-icon">Planung</a>
-        <a href="{{ url_for('months.index') }}"><img src="{{ url_for('static', filename='icons/calendar.svg') }}" alt="" class="ui-icon">Monate</a>
-        <a href="{{ url_for('main.analytics') }}"><img src="{{ url_for('static', filename='icons/chart-simple.svg') }}" alt="" class="ui-icon">Auswertungen</a>
+        <a href="{{ url_for('main.index') }}" aria-label="Übersicht" title="Übersicht"><img src="{{ url_for('static', filename='icons/house.svg') }}" alt="" class="ui-icon"><span>Übersicht</span></a>
+        <a href="{{ url_for('planning.current') }}" aria-label="Planung" title="Planung"><img src="{{ url_for('static', filename='icons/wallet.svg') }}" alt="" class="ui-icon"><span>Planung</span></a>
+        <a href="{{ url_for('months.index') }}" aria-label="Monate" title="Monate"><img src="{{ url_for('static', filename='icons/calendar.svg') }}" alt="" class="ui-icon"><span>Monate</span></a>
+        <a href="{{ url_for('main.analytics') }}" aria-label="Auswertungen" title="Auswertungen"><img src="{{ url_for('static', filename='icons/chart-simple.svg') }}" alt="" class="ui-icon"><span>Auswertungen</span></a>
         {% if current_user.is_admin() %}
-          <a href="{{ url_for('admin.index') }}"><img src="{{ url_for('static', filename='icons/sliders.svg') }}" alt="" class="ui-icon">Optionen</a>
+          <a href="{{ url_for('admin.index') }}" aria-label="Optionen" title="Optionen"><img src="{{ url_for('static', filename='icons/sliders.svg') }}" alt="" class="ui-icon"><span>Optionen</span></a>
         {% else %}
-          <a href="#" data-enable-push><img src="{{ url_for('static', filename='icons/bell.svg') }}" alt="" class="ui-icon">Push</a>
+          <a href="#" data-enable-push aria-label="Push" title="Push"><img src="{{ url_for('static', filename='icons/bell.svg') }}" alt="" class="ui-icon"><span>Push</span></a>
         {% endif %}
       </nav>
     {% endif %}