BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Prevent page overscroll in chat layout (#1034)

Browse Source 
Co-authored-by: vhqtvn <8930337+vhqtvn@users.noreply.github.com>
This commit is contained in:
vhqtvn
2026-04-27 12:14:09 +03:00
committed by GitHub
co-authored by vhqtvn
parent 2bc7b9b178
commit 4b171ee207
4 changed files with 26 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/chat/ChatContainer.tsx
+6 -2
View File
@@ -48,7 +48,11 @@ const EMPTY_QUESTIONS: QuestionRequest[] = [];
const IDLE_SESSION_STATUS = { type: 'idle' as const };
const SESSION_RESELECTED_EVENT = 'openchamber:session-reselected';
const DEFAULT_RETRY_MESSAGE = 'Quota limit reached. Retrying automatically.';
const CHAT_SCROLL_STYLE = { overflowAnchor: 'none' } as const;
const CHAT_SCROLL_STYLE = {
overflowAnchor: 'none',
overscrollBehavior: 'contain',
overscrollBehaviorY: 'contain',
} as const;
const CHAT_NAVIGATION_IGNORED_TARGET_SELECTOR = [
'a[href]',
'button',
@@ -813,7 +817,7 @@ export const ChatContainer: React.FC = () => {
)}
aria-hidden={isDesktopExpandedInput}
>
<div className="absolute inset-0 overflow-y-auto overflow-x-hidden bg-background pt-6">
<div className="absolute inset-0 overflow-y-auto overflow-x-hidden bg-background pt-6" style={CHAT_SCROLL_STYLE}>
<div className="space-y-4">
{HYDRATING_SKELETON_ITEMS.map((item) => (
<div key={item.id} className="group w-full">
packages/ui/src/components/layout/MainLayout.tsx
+11 -8
View File
@@ -383,6 +383,7 @@ export const MainLayout: React.FC = () => {
return (
<DiffWorkerProvider>
<div
data-page-scroll-lock="true"
className={cn(
'main-content-safe-area h-[100dvh]',
isMobile ? 'flex flex-col' : 'flex',
@@ -491,10 +492,11 @@ export const MainLayout: React.FC = () => {
aria-hidden={!mobileLeftDrawerOpen}
>
<div
data-page-scroll-lock="true"
className="h-full overflow-hidden flex bg-[var(--surface-background)] shadow-none drawer-safe-area"
style={{ backgroundImage: 'linear-gradient(var(--surface-muted), var(--surface-muted))' }}
>
<div className="flex-1 min-w-0 overflow-hidden flex flex-col">
<div className="flex-1 min-w-0 overflow-hidden flex flex-col" data-page-scroll-lock="true">
<ErrorBoundary>
<SessionSidebar mobileVariant />
</ErrorBoundary>
@@ -541,7 +543,7 @@ export const MainLayout: React.FC = () => {
)}
aria-hidden={!isRightSidebarOpen}
>
<div className="h-full overflow-hidden flex flex-col bg-background shadow-none drawer-safe-area">
<div className="h-full overflow-hidden flex flex-col bg-background shadow-none drawer-safe-area" data-page-scroll-lock="true">
<ErrorBoundary>
<React.Suspense fallback={null}><GitView /></React.Suspense>
</ErrorBoundary>
@@ -550,12 +552,13 @@ export const MainLayout: React.FC = () => {
{/* Main content area (fixed) */}
<div
data-page-scroll-lock="true"
className={cn(
'flex flex-1 overflow-hidden relative',
isSettingsDialogOpen && 'hidden'
)}
>
<main className="w-full h-full overflow-hidden bg-background relative">
<main className="w-full h-full overflow-hidden bg-background relative" data-page-scroll-lock="true">
<div className={cn('absolute inset-0', !isChatActive && 'invisible')}>
<ErrorBoundary><ChatView /></ErrorBoundary>
</div>
@@ -599,7 +602,7 @@ export const MainLayout: React.FC = () => {
<div className={cn(
'absolute inset-0 flex overflow-hidden',
isDesktopShellRuntime ? 'bg-sidebar' : 'bg-sidebar'
)}>
)} data-page-scroll-lock="true">
{isSidebarOpen ? (
<>
<div
@@ -676,15 +679,15 @@ export const MainLayout: React.FC = () => {
'bg-sidebar',
isSidebarOpen && 'border-l border-border/50 rounded-tl-[10px] rounded-bl-[10px]',
isRightSidebarOpen && 'border-r border-border/50 rounded-tr-[10px] rounded-br-[10px]'
)}>
)} data-page-scroll-lock="true">
<Header desktopRightSidebarActionsHost={desktopRightSidebarActionsHost} />
<div className={cn(
'flex flex-1 min-h-0 overflow-hidden',
isSidebarOpen || isChatActive ? '' : 'border-l border-border/50',
isRightSidebarOpen ? '' : 'border-r border-border/50'
)}>
<div className="relative flex flex-1 min-h-0 min-w-0 overflow-hidden">
<main className="flex-1 overflow-hidden bg-background relative">
)} data-page-scroll-lock="true">
<div className="relative flex flex-1 min-h-0 min-w-0 overflow-hidden" data-page-scroll-lock="true">
<main className="flex-1 overflow-hidden bg-background relative" data-page-scroll-lock="true">
<div className={cn('absolute inset-0', !isChatActive && 'invisible')}>
<ErrorBoundary><ChatView /></ErrorBoundary>
</div>
packages/ui/src/styles/design-system.css
+4 -4
View File
@@ -125,11 +125,11 @@
font-weight: var(--ui-regular-font-weight, 400);
}
/* Desktop shell: prevent rubber-band scrolling of the page itself.
/* Prevent rubber-band scrolling of the page itself.
App scroll should live inside dedicated scroll containers. */
:root.desktop-runtime,
:root.desktop-runtime body,
:root.desktop-runtime #root {
:root,
:root body,
:root #root {
height: 100%;
overflow: hidden;
overscroll-behavior: none;
packages/ui/src/styles/mobile.css
+5
View File
@@ -150,6 +150,11 @@
-webkit-overflow-scrolling: touch;
}
:root.mobile-pointer:not(.desktop-runtime) [data-page-scroll-lock="true"] {
overflow: hidden !important;
overscroll-behavior: none;
}
/* Keep markdown code blocks horizontally scrollable on mobile. */
:root.mobile-pointer:not(.desktop-runtime) .markdown-content [data-markdown="code-block-body"] {
overflow-x: auto !important;