From b9ef0395c1f1d981a4fcb59c2ad864b3e92ab8d0 Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Wed, 6 May 2026 12:31:39 +0200
Subject: [PATCH] feat: enhance app.css and AppSubnavShell for improved
 navigation and layout

- Updated CSS styles to refine card spacing in grid layouts, ensuring consistent margins.
- Enhanced the capture-shell component for better responsiveness and sticky navigation across all viewports.
- Improved sub-navigation structure for both mobile and desktop, promoting a unified user experience.
- Added detailed comments in CSS for better clarity on navigation layers and layout intentions.
---
 frontend/src/app.css                       | 61 ++++++++++++++--------
 frontend/src/components/AppSubnavShell.jsx |  6 ++-
 2 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/frontend/src/app.css b/frontend/src/app.css
index e3a636a..a9ef5e3 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -215,6 +215,11 @@ body { font-family: var(--font); background: var(--bg); color: var(--text1); -we
 /* Cards */
 .card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
 .card + .card { margin-top: 12px; }
+/* In CSS-Grids: Abstände nur über gap, nicht über Adjacent-Sibling-Margin */
+.exercises-list-grid > .card + .card,
+.ref-value-tiles-grid > .card + .card {
+  margin-top: 0;
+}
 .card-title { font-size: 13px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; }
 
 /* Stats grid */
@@ -961,7 +966,7 @@ a.analysis-split__nav-item {
   padding: 8px 10px;
 }
 
-/* Erfassung: Sub-Navigation (Mobil = Chips, Desktop = linke Spalte) */
+/* Erfassung: Sub-Navigation — oben Chip-Zeile (alle Viewports); wie admin-page-subtabs */
 .capture-shell {
   width: 100%;
 }
@@ -970,11 +975,26 @@ a.analysis-split__nav-item {
   display: flex;
   flex-direction: column;
   gap: 16px;
+  align-items: stretch;
+}
+
+.capture-shell__nav-wrap {
+  width: 100%;
+  min-width: 0;
+  position: sticky;
+  top: var(--header-h);
+  z-index: 4;
+  background: var(--bg);
+  padding-bottom: 4px;
+  margin-bottom: 0;
+  border-bottom: 1px solid var(--border);
 }
 
 .capture-shell__nav {
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
   gap: 6px;
   overflow-x: auto;
   padding-bottom: 6px;
@@ -1036,42 +1056,32 @@ a.analysis-split__nav-item {
 
 .capture-shell__main {
   min-width: 0;
+  flex: 1;
 }
 
 @media (min-width: 1024px) {
   .capture-shell__layout {
-    flex-direction: row;
-    align-items: flex-start;
-    gap: 24px;
+    gap: 20px;
   }
 
   .capture-shell__nav-wrap {
-    flex: 0 0 260px;
-    max-width: 280px;
-    position: sticky;
-    top: 16px;
-    align-self: flex-start;
+    top: var(--header-h);
+    padding-top: 2px;
+    padding-bottom: 10px;
   }
 
   .capture-shell__nav {
-    flex-direction: column;
+    flex-wrap: wrap;
     overflow-x: visible;
-    overflow-y: auto;
-    max-height: calc(100vh - 140px);
     padding-bottom: 0;
     gap: 8px;
   }
 
   .capture-shell__nav-item {
-    width: 100%;
-    justify-content: flex-start;
-    border-radius: 10px;
-    white-space: normal;
-    padding: 9px 12px;
-  }
-
-  .capture-shell__main {
-    flex: 1;
+    padding: 9px 14px;
+    border-radius: 999px;
+    font-size: 13px;
+    font-weight: 600;
   }
 }
 
@@ -1492,6 +1502,15 @@ button.capture-shell__nav-item {
   font-size: 0.92rem;
 }
 
+/* ---------- Navigations-Ebenen (Kurzreferenz) ----------
+ * Hauptbereiche: Bottom-Nav / App-Header.
+ * Sektionsumschalter auf einer Seite (2–n Einträge): horizontale Chip-Zeile oben —
+ *   • AppSubnavShell → .capture-shell (sticky unter dem Header, Wrap auf großen Screens)
+ *   • viele flache Tabs (z. B. Stammdaten) → .admin-page-subtabs (gleiche Chip-Idee, Edge-Scroll mobil)
+ * Wechsel zwischen Admin-Seiten → .admin-top-nav
+ * „Sub-Sub“ (dritte Ebene, z. B. Editor-Spalten): bewusst in jeweiligen Feature-Layouts (Seitenleiste / Panel).
+ * ---------- */
+
 /* Admin-Kataloge: Seite „Stammdaten“ — viele Unter-Tabs, Chip-Scroll */
 .admin-page-subtabs {
   display: flex;
diff --git a/frontend/src/components/AppSubnavShell.jsx b/frontend/src/components/AppSubnavShell.jsx
index e40342a..637625d 100644
--- a/frontend/src/components/AppSubnavShell.jsx
+++ b/frontend/src/components/AppSubnavShell.jsx
@@ -1,6 +1,8 @@
 /**
- * Einheitliche Sub-Navigation (Jinkendo-Muster):
- * Mobil = horizontale Chips, Desktop ≥1024px = linke Spalte (sticky).
+ * Sub-Navigation (einheitlich mit Admin-Sektionsschaltern):
+ * — Mobil & Desktop: eine horizontale Chip-/Registerzeile oben (scroll auf schmalen Viewports).
+ * — Eine darunter liegende „Sub-Sub“-Ebene (z. B. Rahmen bearbeiten) bleibt bewusst
+ *   seitlich / in eigenen Layout-Komponenten (z. B. Trainingseinheit, Framework-Editor).
  * Nutzt .capture-shell* aus app.css.
  */
 export default function AppSubnavShell({