From b3c8e8e2107165d62fdcff7c79b6b3413ddd6739 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Thu, 2 Apr 2026 08:56:24 +0200
Subject: [PATCH] refactor(ui): enhance AppContent layout for improved routing
 and styling

- Wrapped the router-view in a new div to manage layout and styling more effectively.
- Updated CSS to ensure proper height management and scrolling behavior, allowing for better content display.
- Added comments to clarify the purpose of layout adjustments and ensure maintainability.
---
 frontend/src/components/AppContent.vue | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/AppContent.vue b/frontend/src/components/AppContent.vue
index 91c9875..85edc95 100644
--- a/frontend/src/components/AppContent.vue
+++ b/frontend/src/components/AppContent.vue
@@ -3,7 +3,12 @@
     <div class="app-content__scroll contentscroll">
       <div class="app-content__inner">
         <AppSectionBar />
-        <router-view></router-view>
+        <div
+          class="app-content__route-root"
+          :class="{ 'app-content__route--fill': Boolean($route.meta?.contentFill) }"
+        >
+          <router-view />
+        </div>
       </div>
     </div>
   </main>
@@ -37,16 +42,22 @@
 
 .app-content__inner {
   max-width: var(--shell-max-width);
+  /* Nur min-height: sonst wächst die Spalte mit dem Inhalt und .app-content__scroll kann scrollen.
+     height:100% + flex:1 auf dem letzten Kind hätte die Seite auf die Viewport-Höhe geklemmt (kein äußerer Scroll). */
   min-height: 100%;
-  height: 100%;
   margin: 0 auto;
   padding: 14px 18px 12px;
   display: flex;
   flex-direction: column;
+  gap: 0;
 }
 
-/* flex-basis 0: Höhe richtet sich nach verbleibendem Platz, nicht nach Inhalt (sonst kein Scroll) */
-.app-content__inner > :last-child {
+.app-content__route-root {
+  min-width: 0;
+}
+
+/* Volle Resthöhe nur wenn eine View meta.contentFill setzt (z. B. feste Split-Layouts) */
+.app-content__inner > .app-content__route-root.app-content__route--fill {
   flex: 1 1 0%;
   min-height: 0;
 }