fix(settings): resolve scrolling layout issue and add spacing between collapsible cards

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>

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"

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"

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>