From 0505ce406c5dd3897e8cb14c91ebcfae889b11ab Mon Sep 17 00:00:00 2001
From: Ulas <ulas@kalayci.cloud>
Date: Mon, 6 Apr 2026 09:46:03 +0200
Subject: [PATCH] fix(ui): fix overlapping header elements on narrow screens
 (#31)

- Calendar toolbar now wraps view buttons to a second row on viewports
  < 580px so nav controls and label stay readable on all iOS devices
- Tasks toolbar title no longer bleeds over action buttons; uses
  min-width:min-content so flex-wrap kicks in before overflow occurs
- Shopping list-header name gets flex:1/overflow:hidden so it truncates
  cleanly instead of colliding with the clear-checked / delete buttons
---
 CHANGELOG.md               |  7 +++++++
 public/styles/calendar.css | 25 +++++++++++++++++++++++++
 public/styles/shopping.css |  4 ++++
 public/styles/tasks.css    |  7 +++++--
 4 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ffd5b9d..1a8aa67 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.14.1] - 2026-04-06
+
+### Fixed
+- Calendar: toolbar no longer overflows on narrow screens (< 580px) - view buttons (Monat/Woche/Tag/Agenda) now wrap to a second row so navigation and label remain fully visible (#31)
+- Tasks: page title no longer visually overlaps action buttons on narrow screens - title now truncates with ellipsis when space is constrained (#31)
+- Shopping: list name no longer overlaps action buttons when the name is long or the "clear checked" button is visible - name now truncates cleanly (#31)
+
 ## [0.14.0] - 2026-04-05
 
 ### Added
diff --git a/public/styles/calendar.css b/public/styles/calendar.css
index facf9af..f536ec1 100644
--- a/public/styles/calendar.css
+++ b/public/styles/calendar.css
@@ -99,6 +99,31 @@
   box-shadow: var(--shadow-sm);
 }
 
+/* ── Schmale Viewports (< 580px): Views in zweite Zeile ── */
+@media (max-width: 579px) {
+  .cal-toolbar {
+    flex-wrap: wrap;
+    row-gap: var(--space-2);
+    padding-bottom: var(--space-2);
+  }
+
+  /* Nächste-Nav ans Ende der ersten Zeile bringen */
+  .cal-toolbar > .cal-toolbar__nav:last-child {
+    order: 4;
+  }
+
+  /* Views in volle zweite Zeile */
+  .cal-toolbar__views {
+    order: 10;
+    flex-basis: 100%;
+    justify-content: center;
+  }
+
+  .cal-toolbar__view-btn {
+    flex: 1;
+  }
+}
+
 /* --------------------------------------------------------
  * Monatsansicht
  * -------------------------------------------------------- */
diff --git a/public/styles/shopping.css b/public/styles/shopping.css
index 193ce07..d994746 100644
--- a/public/styles/shopping.css
+++ b/public/styles/shopping.css
@@ -124,6 +124,9 @@
   align-items: center;
   gap: var(--space-2);
   color: var(--color-text-primary);
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
 }
 
 .list-header__edit-icon {
@@ -136,6 +139,7 @@
   display: flex;
   align-items: center;
   gap: var(--space-2);
+  flex-shrink: 0;
 }
 
 /* --------------------------------------------------------
diff --git a/public/styles/tasks.css b/public/styles/tasks.css
index 0ec768b..5d2f1a1 100644
--- a/public/styles/tasks.css
+++ b/public/styles/tasks.css
@@ -41,8 +41,11 @@
 .tasks-toolbar__title {
   font-size: var(--text-2xl);
   font-weight: var(--font-weight-bold);
-  flex: 1;
-  min-width: 0;
+  flex: 1 1 auto;
+  min-width: min-content;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .tasks-toolbar__actions {