refactor(ui): update layout styles for AppContent and AccountView components
Some checks failed
Deploy to production / deploy (push) Has been cancelled

- Changed layout from grid to flex in AccountView for improved responsiveness and alignment.
- Adjusted flex properties in AppContent to ensure proper scrolling behavior and height management.
- Enhanced styling for account settings panel to support better content overflow handling and visual consistency.
This commit is contained in:
Torsten Schulz (local)
2026-04-02 08:05:32 +02:00
parent 6d9d69dc10
commit 3fb4fb92c6
2 changed files with 15 additions and 7 deletions

View File

@@ -45,8 +45,9 @@
flex-direction: column;
}
/* flex-basis 0: Höhe richtet sich nach verbleibendem Platz, nicht nach Inhalt (sonst kein Scroll) */
.app-content__inner > :last-child {
flex: 1 1 auto;
flex: 1 1 0%;
min-height: 0;
}

View File

@@ -225,14 +225,14 @@ export default {
<style lang="scss" scoped>
.account-settings {
display: grid;
display: flex;
flex-direction: column;
gap: 18px;
max-width: 960px;
/* Flex-Kind von .app-content__inner: ohne overflow wird Inhalt bei min-height:0 abgeschnitten */
width: 100%;
min-height: 0;
overflow-y: auto;
align-content: start;
-webkit-overflow-scrolling: touch;
flex: 1 1 0%;
align-self: stretch;
}
.account-settings__hero,
@@ -244,6 +244,7 @@ export default {
}
.account-settings__hero {
flex: 0 0 auto;
padding: 26px 28px;
}
@@ -265,8 +266,14 @@ export default {
color: var(--color-text-secondary);
}
.account-settings__panel {
/* Unteres Panel: füllt Resthöhe und scrollt (global .surface-card hat overflow:hidden) */
.account-settings__panel.account-settings__panel {
flex: 1 1 0%;
min-height: 0;
padding: 24px;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.account-settings__grid {