fix: improve settings page visual separation (#561)

src/renderer/src/components/settings/RepositoryPane.tsx

@@ -175,7 +175,7 @@ export function RepositoryPane({
 
   const visibleSections = [
     matchesSettingsSearch(searchQuery, identityEntries) ? (
-      <section key="identity" className="space-y-6">
+      <section key="identity" className="space-y-8">
         <div className="flex items-start justify-between gap-4">
           <div className="space-y-1">
             <h3 className="text-sm font-semibold">Identity</h3>

src/renderer/src/components/settings/Settings.tsx

@@ -387,7 +387,7 @@ function Settings(): React.JSX.Element {
 
       <div className="flex min-h-0 flex-1 flex-col">
         <div ref={contentScrollRef} className="min-h-0 flex-1 overflow-y-auto scrollbar-sleek">
-          <div className="flex w-full max-w-5xl flex-col gap-10 px-8 py-8">
+          <div className="flex w-full max-w-5xl flex-col gap-10 px-8 py-10">
             {visibleNavSections.length === 0 ? (
               <div className="flex min-h-[24rem] items-center justify-center rounded-2xl border border-dashed border-border/60 bg-card/30 text-sm text-muted-foreground">
                 No settings found for &quot;{settingsSearchQuery.trim()}&quot;

src/renderer/src/components/settings/SettingsSection.tsx

@@ -25,7 +25,17 @@ export function SettingsSection({
   }
 
   return (
-    <section id={id} data-settings-section={id} className={className ?? 'space-y-6 scroll-mt-6'}>
+    <section
+      id={id}
+      data-settings-section={id}
+      className={
+        // Why: these sections already contain many internal borders and cards, so a lone divider
+        // line gets lost in the visual noise. Giving each section its own padded surface creates a
+        // clear outer silhouette that still works when the inner content changes.
+        className ??
+        'scroll-mt-6 space-y-8 rounded-2xl border border-border/60 bg-card/35 px-6 py-6 shadow-sm'
+      }
+    >
       <div className="space-y-1">
         <h2 className="text-xl font-semibold">{title}</h2>
         <p className="text-sm text-muted-foreground">{description}</p>