From 380bdfeca639594cc2807a908b233a303e38559c Mon Sep 17 00:00:00 2001
From: Hyu <chenhyu@proton.me>
Date: Tue, 1 Sep 2026 17:29:59 +0800
Subject: [PATCH] fix(web): contain nested scrolling without blocking forms

---
 web/src/app/global.css                                      | 4 ++++
 web/src/app/home/agents/components/AgentFormComponent.tsx   | 2 +-
 web/src/app/home/layout.tsx                                 | 2 +-
 web/src/app/home/plugins/PluginDetailContent.tsx            | 6 +++---
 .../components/plugin-installed/plugin-logs/PluginLogs.tsx  | 2 +-
 .../plugin-installed/plugin-readme/PluginReadme.tsx         | 2 +-
 web/src/components/ui/scroll-area.tsx                       | 2 +-
 web/src/components/ui/sidebar.tsx                           | 6 +++---
 8 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/web/src/app/global.css b/web/src/app/global.css
index 4b8e93cd5..f177f2b1b 100644
--- a/web/src/app/global.css
+++ b/web/src/app/global.css
@@ -162,6 +162,10 @@
   * {
     @apply border-border outline-ring/50;
   }
+  html,
+  body {
+    overscroll-behavior: none;
+  }
   body {
     @apply bg-background text-foreground;
   }
diff --git a/web/src/app/home/agents/components/AgentFormComponent.tsx b/web/src/app/home/agents/components/AgentFormComponent.tsx
index ee9fcc104..86b77f026 100644
--- a/web/src/app/home/agents/components/AgentFormComponent.tsx
+++ b/web/src/app/home/agents/components/AgentFormComponent.tsx
@@ -607,7 +607,7 @@ function AgentFormComponent(
             </Tabs>
           </nav>
 
-          <div className="min-h-0 min-w-0 flex-1 overflow-y-auto overflow-x-hidden">
+          <div className="min-h-0 min-w-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-none">
             <div className="mx-auto w-full min-w-0 max-w-5xl space-y-6 pb-8">
               {activeSection === 'runner' && (
                 <div className="space-y-6">
diff --git a/web/src/app/home/layout.tsx b/web/src/app/home/layout.tsx
index 29864873a..ae3bae955 100644
--- a/web/src/app/home/layout.tsx
+++ b/web/src/app/home/layout.tsx
@@ -269,7 +269,7 @@ function HomeLayoutInner({ children }: { children: React.ReactNode }) {
           </div>
         </header>
 
-        <main className="min-h-0 min-w-0 flex-1 overflow-clip px-4 pb-4 pt-0">
+        <main className="min-h-0 min-w-0 flex-1 overflow-hidden px-4 pb-4 pt-0">
           <div
             className={`mx-auto h-full w-full min-w-0 ${HOME_CONTENT_MAX_WIDTH}`}
           >
diff --git a/web/src/app/home/plugins/PluginDetailContent.tsx b/web/src/app/home/plugins/PluginDetailContent.tsx
index 0d1e56e50..0365d0344 100644
--- a/web/src/app/home/plugins/PluginDetailContent.tsx
+++ b/web/src/app/home/plugins/PluginDetailContent.tsx
@@ -209,8 +209,8 @@ export default function PluginDetailContent({ id }: { id: string }) {
           )}
         </div>
 
-        <div className="flex min-h-0 max-w-full flex-1 flex-col gap-6 overflow-y-auto md:flex-row md:overflow-hidden">
-          <div className="min-w-0 max-w-full space-y-4 pb-6 md:min-h-0 md:w-[380px] md:flex-shrink-0 md:overflow-y-auto md:overflow-x-hidden xl:w-[420px]">
+        <div className="flex min-h-0 max-w-full flex-1 flex-col gap-6 overflow-y-auto overscroll-none md:flex-row md:overflow-hidden">
+          <div className="min-w-0 max-w-full space-y-4 pb-6 md:min-h-0 md:w-[380px] md:flex-shrink-0 md:overflow-y-auto md:overflow-x-hidden md:overscroll-none xl:w-[420px]">
             <PluginForm
               pluginAuthor={pluginAuthor}
               pluginName={pluginName}
@@ -231,7 +231,7 @@ export default function PluginDetailContent({ id }: { id: string }) {
               </TabsList>
               <TabsContent
                 value="docs"
-                className="min-h-0 flex-1 md:overflow-y-auto md:overflow-x-hidden"
+                className="min-h-0 flex-1 md:overflow-y-auto md:overflow-x-hidden md:overscroll-none"
               >
                 <PluginReadme
                   pluginAuthor={pluginAuthor}
diff --git a/web/src/app/home/plugins/components/plugin-installed/plugin-logs/PluginLogs.tsx b/web/src/app/home/plugins/components/plugin-installed/plugin-logs/PluginLogs.tsx
index a58198b66..dc4fffaca 100644
--- a/web/src/app/home/plugins/components/plugin-installed/plugin-logs/PluginLogs.tsx
+++ b/web/src/app/home/plugins/components/plugin-installed/plugin-logs/PluginLogs.tsx
@@ -136,7 +136,7 @@ export default function PluginLogs({
       <div
         ref={scrollRef}
         onScroll={handleScroll}
-        className="min-h-0 flex-1 overflow-auto bg-gray-50 px-3 py-3 font-mono text-xs leading-relaxed dark:bg-gray-900/40 sm:px-6"
+        className="min-h-0 flex-1 overflow-auto overscroll-none bg-gray-50 px-3 py-3 font-mono text-xs leading-relaxed dark:bg-gray-900/40 sm:px-6"
       >
         {logs.length === 0 ? (
           <div className="py-8 text-center text-sm text-gray-500 dark:text-gray-400">
diff --git a/web/src/app/home/plugins/components/plugin-installed/plugin-readme/PluginReadme.tsx b/web/src/app/home/plugins/components/plugin-installed/plugin-readme/PluginReadme.tsx
index a8a5dd2ad..0f68171b2 100644
--- a/web/src/app/home/plugins/components/plugin-installed/plugin-readme/PluginReadme.tsx
+++ b/web/src/app/home/plugins/components/plugin-installed/plugin-readme/PluginReadme.tsx
@@ -109,7 +109,7 @@ export default function PluginReadme({
   }, [pluginAuthor, pluginName]);
 
   return (
-    <div className="w-full h-full overflow-auto">
+    <div className="w-full h-full overflow-auto overscroll-none">
       {isLoadingReadme ? (
         <div className="p-6 text-sm text-gray-500 dark:text-gray-400">
           {t('plugins.loadingReadme')}
diff --git a/web/src/components/ui/scroll-area.tsx b/web/src/components/ui/scroll-area.tsx
index df416fbc5..fd022935a 100644
--- a/web/src/components/ui/scroll-area.tsx
+++ b/web/src/components/ui/scroll-area.tsx
@@ -16,7 +16,7 @@ function ScrollArea({
     >
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
-        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+        className="focus-visible:ring-ring/50 size-full overscroll-none rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
       >
         {children}
       </ScrollAreaPrimitive.Viewport>
diff --git a/web/src/components/ui/sidebar.tsx b/web/src/components/ui/sidebar.tsx
index e664817c3..fd0daa9dc 100644
--- a/web/src/components/ui/sidebar.tsx
+++ b/web/src/components/ui/sidebar.tsx
@@ -207,7 +207,7 @@ function SidebarProvider({
             } as React.CSSProperties
           }
           className={cn(
-            'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex h-svh min-h-0 w-full overflow-clip',
+            'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex h-svh min-h-0 w-full overflow-hidden overscroll-none',
             className,
           )}
           {...props}
@@ -566,7 +566,7 @@ function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
     <main
       data-slot="sidebar-inset"
       className={cn(
-        'bg-background relative flex min-h-0 w-full flex-1 flex-col overflow-clip min-w-0',
+        'bg-background relative flex min-h-0 min-w-0 w-full flex-1 flex-col overflow-hidden overscroll-none',
         'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
         'dark:md:peer-data-[variant=inset]:border dark:md:peer-data-[variant=inset]:border-sidebar-border',
         className,
@@ -636,7 +636,7 @@ const SidebarContent = React.forwardRef<
       data-slot="sidebar-content"
       data-sidebar="content"
       className={cn(
-        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto overscroll-none group-data-[collapsible=icon]:overflow-hidden',
         className,
       )}
       {...props}