xinyin025/LangBot
1
0
Fork 0
mirror of https://github.com/langbot-app/LangBot.git synced 2026-09-05 17:17:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): contain nested scrolling without blocking forms

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
web/src/app/global.css
+4
View File
@@ -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
+1 -1
View File
@@ -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
+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}`}
>
web/src/app/home/plugins/PluginDetailContent.tsx
+3 -3
View File
@@ -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}
web/src/app/home/plugins/components/plugin-installed/plugin-logs/PluginLogs.tsx
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+3 -3
View File
@@ -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}