fix(ui): add independent scroll containers to fix scroll wheel on Linux

farion1231 · farion1231 · commit 98084d61aa1a · 2025-12-01T11:28:01.000+08:00
Providers page was using DndContext which may interfere with scroll wheel
events on Linux/Ubuntu WebKitGTK. Added independent scroll containers
with `overflow-y-auto` to all main pages, matching the pattern already
used by the MCP panel which works correctly.

Changes:
- App.tsx: Wrap ProviderList in independent scroll container
- SkillsPage: Use consistent h-[calc(100vh-8rem)] layout
- SettingsPage: Add overflow-hidden and overflow-x-hidden for consistency
diff --git a/src/App.tsx b/src/App.tsx
@@ -303,20 +303,25 @@ function App() {
         return <AgentsPanel onOpenChange={() => setCurrentView("providers")} />;
       default:
         return (
-          <div className="mx-auto max-w-[56rem] px-6 space-y-4">
-            <ProviderList
-              providers={providers}
-              currentProviderId={currentProviderId}
-              appId={activeApp}
-              isLoading={isLoading}
-              onSwitch={switchProvider}
-              onEdit={setEditingProvider}
-              onDelete={setConfirmDelete}
-              onDuplicate={handleDuplicateProvider}
-              onConfigureUsage={setUsageProvider}
-              onOpenWebsite={handleOpenWebsite}
-              onCreate={() => setIsAddOpen(true)}
-            />
+          <div className="mx-auto max-w-[56rem] px-6 flex flex-col h-[calc(100vh-8rem)] overflow-hidden">
+            {/* 独立滚动容器 - 解决 Linux/Ubuntu 下 DndContext 与滚轮事件冲突 */}
+            <div className="flex-1 overflow-y-auto overflow-x-hidden pb-12">
+              <div className="space-y-4">
+                <ProviderList
+                  providers={providers}
+                  currentProviderId={currentProviderId}
+                  appId={activeApp}
+                  isLoading={isLoading}
+                  onSwitch={switchProvider}
+                  onEdit={setEditingProvider}
+                  onDelete={setConfirmDelete}
+                  onDuplicate={handleDuplicateProvider}
+                  onConfigureUsage={setUsageProvider}
+                  onOpenWebsite={handleOpenWebsite}
+                  onCreate={() => setIsAddOpen(true)}
+                />
+              </div>
+            </div>
           </div>
         );
     }
diff --git a/src/components/settings/SettingsPage.tsx b/src/components/settings/SettingsPage.tsx
@@ -151,7 +151,7 @@ export function SettingsPage({
   const isBusy = useMemo(() => isLoading && !settings, [isLoading, settings]);
 
   return (
-    <div className="mx-auto max-w-[56rem] flex flex-col h-[calc(100vh-8rem)] px-6">
+    <div className="mx-auto max-w-[56rem] flex flex-col h-[calc(100vh-8rem)] overflow-hidden px-6">
       {isBusy ? (
         <div className="flex flex-1 items-center justify-center">
           <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
@@ -172,7 +172,7 @@ export function SettingsPage({
             <TabsTrigger value="about">{t("common.about")}</TabsTrigger>
           </TabsList>
 
-          <div className="flex-1 overflow-y-auto pr-2">
+          <div className="flex-1 overflow-y-auto overflow-x-hidden pr-2">
             <TabsContent value="general" className="space-y-6 mt-0">
               {settings ? (
                 <>
diff --git a/src/components/skills/SkillsPage.tsx b/src/components/skills/SkillsPage.tsx
@@ -205,12 +205,10 @@ export const SkillsPage = forwardRef<SkillsPageHandle, SkillsPageProps>(
     }, [skills, searchQuery, filterStatus]);
 
     return (
-      <div className="flex flex-col h-full min-h-0 bg-background/50">
-        {/* 顶部操作栏（固定区域）已移除，由 App.tsx 接管 */}
-
+      <div className="mx-auto max-w-[56rem] px-6 flex flex-col h-[calc(100vh-8rem)] overflow-hidden bg-background/50">
         {/* 技能网格（可滚动详情区域） */}
-        <div className="flex-1 min-h-0 overflow-y-auto animate-fade-in">
-          <div className="mx-auto max-w-[56rem] px-6 py-4">
+        <div className="flex-1 overflow-y-auto overflow-x-hidden animate-fade-in">
+          <div className="py-4">
             {loading ? (
               <div className="flex items-center justify-center h-64">
                 <RefreshCw className="h-8 w-8 animate-spin text-muted-foreground" />
