fix(web): contain nested scrolling without blocking forms

This commit is contained in:
Hyu
2026-09-01 17:29:59 +08:00
parent a87c814dae
commit 380bdfeca6
8 changed files with 15 additions and 11 deletions
@@ -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">
+1 -1
View File
@@ -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}`}
>
@@ -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}
@@ -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">
@@ -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')}