From eeeee2141c07996cfeeb7acd228ef8a3db9e3f99 Mon Sep 17 00:00:00 2001
From: xintaofei <itpkcn@gmail.com>
Date: Sun, 19 Apr 2026 08:45:57 +0800
Subject: [PATCH] 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       | 2 +-
 src/components/settings/appearance-settings.tsx      | 2 +-
 src/components/settings/chat-channel-settings.tsx    | 2 +-
 src/components/settings/experts-settings.tsx         | 2 +-
 src/components/settings/mcp-settings.tsx             | 2 +-
 src/components/settings/model-provider-settings.tsx  | 4 ++--
 src/components/settings/settings-shell.tsx           | 7 +------
 src/components/settings/shortcut-settings.tsx        | 2 +-
 src/components/settings/skills-settings.tsx          | 2 +-
 src/components/settings/system-network-settings.tsx  | 2 +-
 src/components/settings/version-control-settings.tsx | 2 +-
 src/components/settings/web-service-settings.tsx     | 2 +-
 12 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/src/components/settings/acp-agent-settings.tsx b/src/components/settings/acp-agent-settings.tsx
index 203f0fd..c289950 100644
--- a/src/components/settings/acp-agent-settings.tsx
+++ b/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>
diff --git a/src/components/settings/appearance-settings.tsx b/src/components/settings/appearance-settings.tsx
index 98bd89b..7e66af6 100644
--- a/src/components/settings/appearance-settings.tsx
+++ b/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">
diff --git a/src/components/settings/chat-channel-settings.tsx b/src/components/settings/chat-channel-settings.tsx
index 9680ca0..d6f016d 100644
--- a/src/components/settings/chat-channel-settings.tsx
+++ b/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>
diff --git a/src/components/settings/experts-settings.tsx b/src/components/settings/experts-settings.tsx
index 17dbc46..e7652dc 100644
--- a/src/components/settings/experts-settings.tsx
+++ b/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>
diff --git a/src/components/settings/mcp-settings.tsx b/src/components/settings/mcp-settings.tsx
index ef7232e..131fea3 100644
--- a/src/components/settings/mcp-settings.tsx
+++ b/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}
diff --git a/src/components/settings/model-provider-settings.tsx b/src/components/settings/model-provider-settings.tsx
index 29a4c21..4a1c0b2 100644
--- a/src/components/settings/model-provider-settings.tsx
+++ b/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__"}
diff --git a/src/components/settings/settings-shell.tsx b/src/components/settings/settings-shell.tsx
index 1dbe32c..eef543e 100644
--- a/src/components/settings/settings-shell.tsx
+++ b/src/components/settings/settings-shell.tsx
@@ -236,12 +236,7 @@ export function SettingsShell({ children }: SettingsShellProps) {
           </Sheet>
         )}
 
-        <section
-          className={cn(
-            "flex-1 min-w-0 min-h-0 overflow-auto",
-            isMobile ? "p-3" : "p-4"
-          )}
-        >
+        <section className="flex-1 min-w-0 min-h-0 overflow-hidden">
           {children}
         </section>
       </div>
diff --git a/src/components/settings/shortcut-settings.tsx b/src/components/settings/shortcut-settings.tsx
index 0b1953a..97b3dfd 100644
--- a/src/components/settings/shortcut-settings.tsx
+++ b/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">
diff --git a/src/components/settings/skills-settings.tsx b/src/components/settings/skills-settings.tsx
index 5f78dc8..9549655 100644
--- a/src/components/settings/skills-settings.tsx
+++ b/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>
diff --git a/src/components/settings/system-network-settings.tsx b/src/components/settings/system-network-settings.tsx
index cb19ab3..28b0b2a 100644
--- a/src/components/settings/system-network-settings.tsx
+++ b/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>
diff --git a/src/components/settings/version-control-settings.tsx b/src/components/settings/version-control-settings.tsx
index d5991a4..e166112 100644
--- a/src/components/settings/version-control-settings.tsx
+++ b/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">
diff --git a/src/components/settings/web-service-settings.tsx b/src/components/settings/web-service-settings.tsx
index 2e1c078..dc99d4b 100644
--- a/src/components/settings/web-service-settings.tsx
+++ b/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">