fix(settings): move content padding inside scroll areas to keep inner borders visible

The settings shell wrapped children in an outer section with p-3/p-4 padding.
With OverlayScrollbars replacing native scroll, the overlay scrollbar sat at
the viewport's right edge and covered the right border of inner cards.

Drop the outer padding (and the now-redundant overflow-auto) from the shell
and apply p-3 md:p-4 inside each settings page instead, so the scrollbar
aligns with the column edge while inner sections stay within the padded area.

src/components/settings/acp-agent-settings.tsx

@@ -5039,7 +5039,7 @@ export function AcpAgentSettings() {
   }
 
   return (
-    <div className="h-full flex flex-col">
+    <div className="h-full flex flex-col p-3 md:p-4">
       <div className="flex items-center justify-between gap-3 pb-4">
         <div>
           <h2 className="text-base font-semibold">{t("title")}</h2>

src/components/settings/appearance-settings.tsx

@@ -49,7 +49,7 @@ export function AppearanceSettings() {
 
   return (
     <ScrollArea className="h-full">
-      <div className="w-full space-y-4">
+      <div className="w-full space-y-4 p-3 md:p-4">
         {/* ===== Theme Mode (existing) ===== */}
         <section className="rounded-xl border bg-card p-4 space-y-4">
           <div className="flex items-center gap-2">

src/components/settings/chat-channel-settings.tsx

@@ -14,7 +14,7 @@ export function ChatChannelSettings() {
 
   return (
     <ScrollArea className="h-full">
-      <Tabs defaultValue="channels" className="w-full space-y-4">
+      <Tabs defaultValue="channels" className="w-full space-y-4 p-3 md:p-4">
         <section className="space-y-3">
           <div>
             <h1 className="text-sm font-semibold">{t("sectionTitle")}</h1>

src/components/settings/experts-settings.tsx

@@ -410,7 +410,7 @@ export function ExpertsSettings() {
   const SelectedIcon = selectedIcon
 
   return (
-    <div className="h-full flex flex-col">
+    <div className="h-full flex flex-col p-3 md:p-4">
       <div className="flex items-center justify-between gap-3 pb-4">
         <div>
           <h2 className="text-base font-semibold">{t("title")}</h2>

src/components/settings/mcp-settings.tsx

@@ -893,7 +893,7 @@ export function McpSettings() {
         </DialogContent>
       </Dialog>
 
-      <div className="h-full min-h-0 grid grid-cols-1 gap-4 lg:grid-cols-[360px_1fr]">
+      <div className="h-full min-h-0 grid grid-cols-1 gap-4 p-3 md:p-4 lg:grid-cols-[360px_1fr]">
         <section className="min-h-0 rounded-xl border bg-card p-3">
           <Tabs
             value={leftTab}

src/components/settings/model-provider-settings.tsx

@@ -93,7 +93,7 @@ export function ModelProviderSettings() {
 
   return (
     <ScrollArea className="h-full">
-      <section className="space-y-3">
+      <section className="space-y-3 px-3 pt-3 md:px-4 md:pt-4">
         <div>
           <h1 className="text-sm font-semibold">{t("sectionTitle")}</h1>
           <p className="text-sm text-muted-foreground">
@@ -102,7 +102,7 @@ export function ModelProviderSettings() {
         </div>
       </section>
 
-      <section className="mt-4 space-y-2">
+      <section className="mt-4 space-y-2 px-3 pb-3 md:px-4 md:pb-4">
         <div className="flex items-center justify-between gap-2">
           <Select
             value={filter ?? "__all__"}

src/components/settings/settings-shell.tsx

@@ -236,12 +236,7 @@ export function SettingsShell({ children }: SettingsShellProps) {
           </Sheet>
         )}
 
-        <section
+        <section className="flex-1 min-w-0 min-h-0 overflow-hidden">
-          className={cn(
-            "flex-1 min-w-0 min-h-0 overflow-auto",
-            isMobile ? "p-3" : "p-4"
-          )}
-        >
           {children}
         </section>
       </div>

src/components/settings/shortcut-settings.tsx

@@ -100,7 +100,7 @@ export function ShortcutSettings() {
 
   return (
     <ScrollArea className="h-full">
-      <div className="w-full space-y-4">
+      <div className="w-full space-y-4 p-3 md:p-4">
         <section className="rounded-xl border bg-card p-4 space-y-4">
           <div className="flex items-center justify-between gap-3">
             <div className="flex items-center gap-2">

src/components/settings/skills-settings.tsx

@@ -775,7 +775,7 @@ export function SkillsSettings() {
   }
 
   return (
-    <div className="h-full flex flex-col">
+    <div className="h-full flex flex-col p-3 md:p-4">
       <div className="flex items-center justify-between gap-3 pb-4">
         <div>
           <h2 className="text-base font-semibold">{t("title")}</h2>

src/components/settings/system-network-settings.tsx

@@ -343,7 +343,7 @@ export function SystemNetworkSettings() {
 
   return (
     <ScrollArea className="h-full">
-      <div className="w-full space-y-4">
+      <div className="w-full space-y-4 p-3 md:p-4">
         <section className="space-y-1">
           <div className="flex items-center justify-between">
             <h1 className="text-sm font-semibold">{t("sectionTitle")}</h1>

src/components/settings/version-control-settings.tsx

@@ -346,7 +346,7 @@ export function VersionControlSettings() {
 
   return (
     <ScrollArea className="h-full">
-      <div className="w-full space-y-4">
+      <div className="w-full space-y-4 p-3 md:p-4">
         <section className="space-y-1">
           <h1 className="text-sm font-semibold">{t("sectionTitle")}</h1>
           <p className="text-xs text-muted-foreground">

src/components/settings/web-service-settings.tsx

@@ -218,7 +218,7 @@ export function WebServiceSettings() {
 
   return (
     <ScrollArea className="h-full">
-      <div className="space-y-6">
+      <div className="space-y-6 p-3 md:p-4">
         <div>
           <h3 className="text-lg font-medium">{t("sectionTitle")}</h3>
           <p className="text-sm text-muted-foreground">