refactor(ui): enhance AppContent layout for improved routing and styling
All checks were successful
Deploy to production / deploy (push) Successful in 3m0s

- 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.
This commit is contained in:
Torsten Schulz (local)
2026-04-02 08:56:24 +02:00
parent 02f3e82987
commit b3c8e8e210

View File

@@ -3,7 +3,12 @@
<div class="app-content__scroll contentscroll"> <div class="app-content__scroll contentscroll">
<div class="app-content__inner"> <div class="app-content__inner">
<AppSectionBar /> <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>
</div> </div>
</main> </main>
@@ -37,16 +42,22 @@
.app-content__inner { .app-content__inner {
max-width: var(--shell-max-width); 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%; min-height: 100%;
height: 100%;
margin: 0 auto; margin: 0 auto;
padding: 14px 18px 12px; padding: 14px 18px 12px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0;
} }
/* flex-basis 0: Höhe richtet sich nach verbleibendem Platz, nicht nach Inhalt (sonst kein Scroll) */ .app-content__route-root {
.app-content__inner > :last-child { 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%; flex: 1 1 0%;
min-height: 0; min-height: 0;
} }