fix(web): contain nested scrolling without blocking forms

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;
   }

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">

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}`}
           >

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="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 xl:w-[420px]">
+          <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}

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">

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')}

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>

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}