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-direction: column;
} }
/* flex-basis 0: Höhe richtet sich nach verbleibendem Platz, nicht nach Inhalt (sonst kein Scroll) */
.app-content__inner > :last-child { .app-content__inner > :last-child {
flex: 1 1 auto; flex: 1 1 0%;
min-height: 0; min-height: 0;
} }

View File

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