Improve mobile responsiveness and touch targets

Add comprehensive mobile-first adjustments across the UI: reorganize topbar actions and context in Layout.vue, make the navigation drawer mobile-friendly (new mobile class, bottom location, density and block-button behavior), and add many responsive CSS rules. Introduce safe-area variables and larger touch targets in global.css (44px buttons, icon sizes, nav item heights), plus additional responsive patterns in page-layouts.css and surface-patterns.css. Apply mobile breakpoints and spacing/stacking tweaks to Home, Login, Impressum and 404 pages to ensure CTAs, cards and forms behave well on <=960px and <=600px viewports. Document the responsive implementation standard in GUI/style.md and update codexInfo.md to note the mobile/usability changes. Changes are scoped to mobile breakpoints to avoid desktop regressions.
2026-04-17 23:57:02 +02:00
parent 8ccc515a7b
commit 36ba210323
10 changed files with 481 additions and 36 deletions
@@ -313,6 +313,51 @@ Desktop ist der Hauptfokus. Mobile muss funktionieren, aber nicht die Priorität
 - Fokus auf Navigation und Öffnen
 - Bearbeitung von Markdown darf reduziert sein, solange Lesen und einfache Bedienung sauber funktionieren

+### Umsetzungsstandard Responsivität (verbindlich)
+Die folgenden Regeln bilden den aktuellen Responsive-Standard von Hoard und sollen bei allen kommenden UI-Aufgaben eingehalten werden.
+
+1. **Desktop-first, Mobile-only Overrides**
+- Desktop-Styles bleiben Basis.
+- Mobile-Anpassungen ausschließlich in Media Queries, keine Änderungen an Desktop-Baseregeln.
+
+2. **Breakpoints**
+- `@media (width <= 960px)` für Tablet/Mobile-Umbruch (Layout-Stacks, Spacing-Reduktion, Drawer-/Footer-Verhalten).
+- `@media (width <= 600px)` für Phone-Feinschliff (volle Breite für CTAs, kompaktere Typo/Abstände).
+
+3. **Globale Responsive-Patterns zuerst nutzen**
+- Wiederverwendbare Anpassungen immer zuerst in den globalen Dateien pflegen:
+  - `GUI/src/global.css`
+  - `GUI/src/styles/global/page-layouts.css`
+  - `GUI/src/styles/global/surface-patterns.css`
+- Seiten-spezifisches `scoped` CSS nur für wirklich lokale Sonderfälle.
+
+4. **Touch-Zielgrößen und Bedienbarkeit**
+- Interaktive Elemente mobil mit klarer Daumen-Bedienbarkeit:
+  - Buttons mindestens `44px` Höhe.
+  - Icon-Buttons mindestens `44x44px`.
+  - Navigations-Listeneinträge mindestens `48px` Höhe.
+- Aktionszeilen (`hoard-action-row`) auf kleinen Geräten vertikal stapeln, damit Primäraktionen gut erreichbar sind.
+
+5. **Safe-Area-Unterstützung**
+- Bei mobilen Außenabständen `env(safe-area-inset-*)` berücksichtigen (iOS/Android).
+- Muster: `max(var(--space-x), env(safe-area-inset-...))` als Fallback-sicherer Abstand.
+- Besonders relevant für App-Bar-Ränder, Seiten-Padding und Bottom-Bereiche (Drawer/Footer).
+
+6. **App-Shell-Muster**
+- Mobile Navigation bleibt als Bottom-Sheet-Drawer.
+- Desktop-Navigation bleibt unverändert (keine visuelle Regression auf großen Viewports).
+- Footer-Links auf kleinen Screens umbauen (Wrap/Grid), mit ausreichend großen Tap-Flächen.
+
+7. **Seiten-Muster**
+- Content-Änderungen vermeiden; nur Layout/Bedienung anpassen.
+- Karten-/Grid-Bereiche bei `<= 960px` in Einspalten-Layout überführen.
+- Primäre CTAs bei `<= 600px` in voller Breite anzeigen.
+
+8. **Responsive QA vor Abschluss**
+- Pflicht-Viewports: `360x800`, `390x844`, `768x1024`, `1024x768`, `>=1280`.
+- Prüfen: Navigation, Scroll-Verhalten, CTA-Erreichbarkeit, Formular-Bedienbarkeit.
+- Desktop-Regression-Check: bei `>=1024` darf sich das gewollte Desktop-Erscheinungsbild nicht ändern.
+
 ## Interaktionsprinzipien
 - Primäraktionen immer klar sichtbar
 - destruktive Aktionen nie zu nah an Standardaktionen