From 28cf1a2f6ab1e6144785e61854228101afcaed83 Mon Sep 17 00:00:00 2001
From: agentbox <agentbox@cozytren.ch>
Date: Sat, 1 Aug 2026 06:55:04 +0000
Subject: [PATCH] fix: lunch before dinner in columns, responsive mobile layout

- models.py: ORDER BY CASE so lunch always appears before dinner in the
  dashboard table (was alphabetical, putting dinner first).
- style.css: add @media (max-width: 600px) with mobile-friendly layout:
  stacked navbar, full-width dashboard header, reduced padding/margins,
  larger touch targets for chips/buttons, stacked manage forms, and
  compact table cells.
---
 models.py        |  2 +-
 static/style.css | 72 ++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 73 insertions(+), 1 deletion(-)

diff --git a/models.py b/models.py
index b6b89ad..0c0e538 100644
--- a/models.py
+++ b/models.py
@@ -272,7 +272,7 @@ def ensure_meal_periods(for_date: date) -> list[dict]:
             (date_str,),
         )
         rows = db.execute(
-            "SELECT id, date, meal_type FROM meal_periods WHERE date = ? ORDER BY meal_type",
+            "SELECT id, date, meal_type FROM meal_periods WHERE date = ? ORDER BY CASE meal_type WHEN 'lunch' THEN 1 WHEN 'dinner' THEN 2 END",
             (date_str,),
         ).fetchall()
         return [dict(r) for r in rows]
diff --git a/static/style.css b/static/style.css
index 7863f4c..d1f7abf 100644
--- a/static/style.css
+++ b/static/style.css
@@ -256,3 +256,75 @@ body {
 .lang-link:hover { background: #eee; color: var(--text); }
 .lang-active { background: var(--primary); color: #fff; }
 .lang-active:hover { background: #0d47a1; color: #fff; }
+
+/* ── Responsive ── */
+@media (max-width: 600px) {
+    .navbar {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+        padding: 10px 16px;
+    }
+    .nav-right {
+        width: 100%;
+        flex-wrap: wrap;
+        gap: 6px;
+    }
+    .container {
+        margin: 16px auto;
+        padding: 0 8px;
+    }
+    .dashboard-header {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    .dashboard-header h2 {
+        font-size: 1.1rem;
+    }
+    .date-nav {
+        width: 100%;
+        justify-content: space-between;
+    }
+    .date-display {
+        font-size: 0.85rem;
+    }
+    .meal-table th,
+    .meal-table td {
+        padding: 8px 10px;
+        font-size: 0.85rem;
+    }
+    .meal-col {
+        min-width: 140px;
+    }
+    .user-cell {
+        min-width: 70px;
+    }
+    .chip {
+        padding: 8px 14px;
+        font-size: 0.8rem;
+    }
+    .form-card {
+        margin: 16px auto;
+        padding: 20px 16px;
+        max-width: 100%;
+    }
+    .manage-forms {
+        flex-direction: column;
+        gap: 12px;
+    }
+    .manage-form {
+        min-width: 0;
+        flex: none;
+    }
+    .btn {
+        padding: 8px 12px;
+        font-size: 0.85rem;
+    }
+    .btn-sm {
+        padding: 6px 10px;
+        font-size: 0.8rem;
+    }
+    .action-col {
+        width: auto;
+    }
+}