From 190c0dd7fa8b3627a6ab3dd7f4ef6394d0ff7f02 Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Sun, 5 Apr 2026 10:21:06 +0200
Subject: [PATCH] feat: Standardize capture page layout to a unified content
 width across all relevant pages

---
 docs/issues/PHASE_PLAN_RESPONSIVE_UI.md | 2 +-
 frontend/src/app.css                    | 9 +++------
 frontend/src/pages/ActivityPage.jsx     | 2 +-
 frontend/src/pages/NutritionPage.jsx    | 2 +-
 frontend/src/pages/SleepPage.jsx        | 2 +-
 frontend/src/pages/VitalsPage.jsx       | 2 +-
 6 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/docs/issues/PHASE_PLAN_RESPONSIVE_UI.md b/docs/issues/PHASE_PLAN_RESPONSIVE_UI.md
index de4f394..42542f3 100644
--- a/docs/issues/PHASE_PLAN_RESPONSIVE_UI.md
+++ b/docs/issues/PHASE_PLAN_RESPONSIVE_UI.md
@@ -17,7 +17,7 @@
 | P3 | Dashboard (Desktop-Grid) | ☑ erledigt | 4-spaltige Kennzahlen; Begrüßung; Ernährung/Aktivität 2-spaltig |
 | P4 | Verlauf (Tabs links / Content rechts) | ☑ erledigt | `History.jsx` + `.history-*` in `app.css`; Tab-State bei `location.state.tab` |
 | P5 | Analyse (Prompts links / Ergebnis rechts) | ☑ erledigt | `Analysis.jsx` + `.analysis-split*` in `app.css` |
-| P6 | Erfassung / Capture & Formularseiten | ☑ erledigt | `.capture-page` / `.capture-page--wide` in `app.css`; CaptureHub, Wizard, Gewicht–Ziele, Guide, Ernährung/Aktivität/Vital/Schlaf breiter |
+| P6 | Erfassung / Capture & Formularseiten | ☑ erledigt | `.capture-page` + `--capture-content-max` (eine Desktop-Breite); CaptureShell-Navigation |
 | P7 | Admin & restliche Vollbreiten-Seiten | ⏸ Konzeption | Layout nach Abstimmung; nicht mit P6 mitgezogen |
 | P8 | Abschluss, Regression, Spec-Pflege | ☐ pending | |
 
diff --git a/frontend/src/app.css b/frontend/src/app.css
index 88e781d..5ebc86b 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -15,6 +15,7 @@
   --nav-h: 64px;
   --header-h: 52px;
   --font: system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --capture-content-max: 800px;
 }
 @media (prefers-color-scheme: dark) {
   :root {
@@ -344,7 +345,7 @@ body { font-family: var(--font); background: var(--bg); color: var(--text1); -we
   }
 }
 
-/* P6 / RESPONSIVE_UI §5.4 – Erfassung: Desktop zentriert; data-lastige Seiten etwas breiter */
+/* Erfassung: eine einheitliche Inhaltsbreite (Desktop), zentriert; mobil volle Breite */
 .capture-page {
   width: 100%;
   max-width: 100%;
@@ -353,14 +354,10 @@ body { font-family: var(--font); background: var(--bg); color: var(--text1); -we
 
 @media (min-width: 1024px) {
   .capture-page {
-    max-width: 600px;
+    max-width: var(--capture-content-max);
     margin-left: auto;
     margin-right: auto;
   }
-
-  .capture-page--wide {
-    max-width: 900px;
-  }
 }
 
 /* Erfassung: Sub-Navigation (Mobil = Chips, Desktop = linke Spalte) */
diff --git a/frontend/src/pages/ActivityPage.jsx b/frontend/src/pages/ActivityPage.jsx
index 69c5cd5..759bdf2 100644
--- a/frontend/src/pages/ActivityPage.jsx
+++ b/frontend/src/pages/ActivityPage.jsx
@@ -254,7 +254,7 @@ export default function ActivityPage() {
   }
 
   return (
-    <div className="capture-page capture-page--wide">
+    <div className="capture-page">
       <h1 className="page-title">Aktivität</h1>
 
       <div className="tabs" style={{overflowX:'auto',flexWrap:'nowrap'}}>
diff --git a/frontend/src/pages/NutritionPage.jsx b/frontend/src/pages/NutritionPage.jsx
index e92b8b8..fc6c1ac 100644
--- a/frontend/src/pages/NutritionPage.jsx
+++ b/frontend/src/pages/NutritionPage.jsx
@@ -802,7 +802,7 @@ export default function NutritionPage() {
   useEffect(() => { load() }, [])
 
   return (
-    <div className="capture-page capture-page--wide">
+    <div className="capture-page">
       <h1 className="page-title">Ernährung</h1>
 
       {/* Input Method Tabs */}
diff --git a/frontend/src/pages/SleepPage.jsx b/frontend/src/pages/SleepPage.jsx
index f586f84..0d8c26a 100644
--- a/frontend/src/pages/SleepPage.jsx
+++ b/frontend/src/pages/SleepPage.jsx
@@ -142,7 +142,7 @@ export default function SleepPage() {
   }
 
   return (
-    <div className="capture-page capture-page--wide" style={{ padding: '16px 16px 80px' }}>
+    <div className="capture-page" style={{ padding: '16px 16px 80px' }}>
       {/* Toast Notification */}
       {toast && (
         <div style={{
diff --git a/frontend/src/pages/VitalsPage.jsx b/frontend/src/pages/VitalsPage.jsx
index ef4593e..d2c7254 100644
--- a/frontend/src/pages/VitalsPage.jsx
+++ b/frontend/src/pages/VitalsPage.jsx
@@ -1064,7 +1064,7 @@ export default function VitalsPage() {
   }
 
   return (
-    <div className="capture-page capture-page--wide">
+    <div className="capture-page">
       <h1 className="page-title">Vitalwerte</h1>
 
       <div className="tabs" style={{ overflowX: 'auto', flexWrap: 'nowrap' }}>