From 48151906d35605c15b8b8cbe251c790cf5499a29 Mon Sep 17 00:00:00 2001
From: Chneemann <andre-kempf@mailbox.org>
Date: Sun, 27 Sep 2026 20:37:39 +0200
Subject: [PATCH] fix(settings): resolve scrolling layout issue and add spacing
 between collapsible cards

---
 app/(app)/settings/page.tsx                       | 3 +--
 components/settings/SettingsDeleteAccountCard.tsx | 2 +-
 components/settings/SettingsProfileCard.tsx       | 2 +-
 components/settings/SettingsView.tsx              | 2 +-
 4 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/app/(app)/settings/page.tsx b/app/(app)/settings/page.tsx
index 0c55105..ab8b8db 100644
--- a/app/(app)/settings/page.tsx
+++ b/app/(app)/settings/page.tsx
@@ -18,9 +18,8 @@ export default async function SettingsPage() {
   }
 
   return (
-    <div className="flex p-4 flex-col h-full w-full bg-background min-h-0 overflow-hidden">
+    <div className="flex flex-col h-full w-full bg-background p-4 min-h-0 overflow-hidden">
       <AppHeader isSettings />
-
       <SettingsView />
       <AppFooter />
     </div>
diff --git a/components/settings/SettingsDeleteAccountCard.tsx b/components/settings/SettingsDeleteAccountCard.tsx
index 7eed30a..ac4a56b 100644
--- a/components/settings/SettingsDeleteAccountCard.tsx
+++ b/components/settings/SettingsDeleteAccountCard.tsx
@@ -63,7 +63,7 @@ export function SettingsDeleteAccountCard({
   };
 
   return (
-    <div className="bg-surface border border-rose-500/20 rounded-xl overflow-hidden transition-all shrink-0">
+    <div className="bg-surface border border-muted/20 rounded-xl overflow-hidden transition-all shrink-0">
       {/* Header / Toggle Button */}
       <button
         type="button"
diff --git a/components/settings/SettingsProfileCard.tsx b/components/settings/SettingsProfileCard.tsx
index 3918463..65e5992 100644
--- a/components/settings/SettingsProfileCard.tsx
+++ b/components/settings/SettingsProfileCard.tsx
@@ -33,7 +33,7 @@ export function SettingsProfileCard({
   if (!currentUser) return null;
 
   return (
-    <div className="bg-surface border border-muted/20 rounded-xl overflow-hidden transition-all">
+    <div className="bg-surface border border-muted/20 rounded-xl overflow-hidden transition-all shrink-0">
       {/* Clickable Header / Toggle Bar */}
       <button
         type="button"
diff --git a/components/settings/SettingsView.tsx b/components/settings/SettingsView.tsx
index 035b9bb..1945fda 100644
--- a/components/settings/SettingsView.tsx
+++ b/components/settings/SettingsView.tsx
@@ -26,7 +26,7 @@ export function SettingsView() {
   if (!currentUser) return null;
 
   return (
-    <div className="flex-1 flex flex-col gap-4 py-4 min-h-0">
+    <div className="flex-1 overflow-y-auto flex flex-col gap-4 py-4 min-h-0 pr-1">
       <SettingsProfileCard onUpdate={updateProfile} />
       <SettingsDeleteAccountCard />
     </div>