From 3fb4fb92c6308e38f536671efe2c5b925496e47a Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Thu, 2 Apr 2026 08:05:32 +0200
Subject: [PATCH] refactor(ui): update layout styles for AppContent and
 AccountView components

- 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.
---
 frontend/src/components/AppContent.vue      |  3 ++-
 frontend/src/views/settings/AccountView.vue | 19 +++++++++++++------
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/AppContent.vue b/frontend/src/components/AppContent.vue
index 28b7559..91c9875 100644
--- a/frontend/src/components/AppContent.vue
+++ b/frontend/src/components/AppContent.vue
@@ -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;
 }
 
diff --git a/frontend/src/views/settings/AccountView.vue b/frontend/src/views/settings/AccountView.vue
index 425dd32..3436bb8 100644
--- a/frontend/src/views/settings/AccountView.vue
+++ b/frontend/src/views/settings/AccountView.vue
@@ -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 {