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 IDLE_SESSION_STATUS = { type: 'idle' as const };
const SESSION_RESELECTED_EVENT = 'openchamber:session-reselected'; const SESSION_RESELECTED_EVENT = 'openchamber:session-reselected';
const DEFAULT_RETRY_MESSAGE = 'Quota limit reached. Retrying automatically.'; 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 = [ const CHAT_NAVIGATION_IGNORED_TARGET_SELECTOR = [
'a[href]', 'a[href]',
'button', 'button',
@@ -813,7 +817,7 @@ export const ChatContainer: React.FC = () => {
)} )}
aria-hidden={isDesktopExpandedInput} 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"> <div className="space-y-4">
{HYDRATING_SKELETON_ITEMS.map((item) => ( {HYDRATING_SKELETON_ITEMS.map((item) => (
<div key={item.id} className="group w-full"> <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 ( return (
<DiffWorkerProvider> <DiffWorkerProvider>
<div <div
data-page-scroll-lock="true"
className={cn( className={cn(
'main-content-safe-area h-[100dvh]', 'main-content-safe-area h-[100dvh]',
isMobile ? 'flex flex-col' : 'flex', isMobile ? 'flex flex-col' : 'flex',
@@ -491,10 +492,11 @@ export const MainLayout: React.FC = () => {
aria-hidden={!mobileLeftDrawerOpen} aria-hidden={!mobileLeftDrawerOpen}
> >
<div <div
data-page-scroll-lock="true"
className="h-full overflow-hidden flex bg-[var(--surface-background)] shadow-none drawer-safe-area" 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))' }} 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> <ErrorBoundary>
<SessionSidebar mobileVariant /> <SessionSidebar mobileVariant />
</ErrorBoundary> </ErrorBoundary>
@@ -541,7 +543,7 @@ export const MainLayout: React.FC = () => {
)} )}
aria-hidden={!isRightSidebarOpen} 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> <ErrorBoundary>
<React.Suspense fallback={null}><GitView /></React.Suspense> <React.Suspense fallback={null}><GitView /></React.Suspense>
</ErrorBoundary> </ErrorBoundary>
@@ -550,12 +552,13 @@ export const MainLayout: React.FC = () => {
{/* Main content area (fixed) */} {/* Main content area (fixed) */}
<div <div
data-page-scroll-lock="true"
className={cn( className={cn(
'flex flex-1 overflow-hidden relative', 'flex flex-1 overflow-hidden relative',
isSettingsDialogOpen && 'hidden' 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')}> <div className={cn('absolute inset-0', !isChatActive && 'invisible')}>
<ErrorBoundary><ChatView /></ErrorBoundary> <ErrorBoundary><ChatView /></ErrorBoundary>
</div> </div>
@@ -599,7 +602,7 @@ export const MainLayout: React.FC = () => {
<div className={cn( <div className={cn(
'absolute inset-0 flex overflow-hidden', 'absolute inset-0 flex overflow-hidden',
isDesktopShellRuntime ? 'bg-sidebar' : 'bg-sidebar' isDesktopShellRuntime ? 'bg-sidebar' : 'bg-sidebar'
)}> )} data-page-scroll-lock="true">
{isSidebarOpen ? ( {isSidebarOpen ? (
<> <>
<div <div
@@ -676,15 +679,15 @@ export const MainLayout: React.FC = () => {
'bg-sidebar', 'bg-sidebar',
isSidebarOpen && 'border-l border-border/50 rounded-tl-[10px] rounded-bl-[10px]', isSidebarOpen && 'border-l border-border/50 rounded-tl-[10px] rounded-bl-[10px]',
isRightSidebarOpen && 'border-r border-border/50 rounded-tr-[10px] rounded-br-[10px]' isRightSidebarOpen && 'border-r border-border/50 rounded-tr-[10px] rounded-br-[10px]'
)}> )} data-page-scroll-lock="true">
<Header desktopRightSidebarActionsHost={desktopRightSidebarActionsHost} /> <Header desktopRightSidebarActionsHost={desktopRightSidebarActionsHost} />
<div className={cn( <div className={cn(
'flex flex-1 min-h-0 overflow-hidden', 'flex flex-1 min-h-0 overflow-hidden',
isSidebarOpen || isChatActive ? '' : 'border-l border-border/50', isSidebarOpen || isChatActive ? '' : 'border-l border-border/50',
isRightSidebarOpen ? '' : 'border-r border-border/50' isRightSidebarOpen ? '' : 'border-r border-border/50'
)}> )} data-page-scroll-lock="true">
<div className="relative flex flex-1 min-h-0 min-w-0 overflow-hidden"> <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"> <main className="flex-1 overflow-hidden bg-background relative" data-page-scroll-lock="true">
<div className={cn('absolute inset-0', !isChatActive && 'invisible')}> <div className={cn('absolute inset-0', !isChatActive && 'invisible')}>
<ErrorBoundary><ChatView /></ErrorBoundary> <ErrorBoundary><ChatView /></ErrorBoundary>
</div> </div>
packages/ui/src/styles/design-system.css
+4 -4
View File
@@ -125,11 +125,11 @@
font-weight: var(--ui-regular-font-weight, 400); 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. */ App scroll should live inside dedicated scroll containers. */
:root.desktop-runtime, :root,
:root.desktop-runtime body, :root body,
:root.desktop-runtime #root { :root #root {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
overscroll-behavior: none; overscroll-behavior: none;
packages/ui/src/styles/mobile.css
+5
View File
@@ -150,6 +150,11 @@
-webkit-overflow-scrolling: touch; -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. */ /* Keep markdown code blocks horizontally scrollable on mobile. */
:root.mobile-pointer:not(.desktop-runtime) .markdown-content [data-markdown="code-block-body"] { :root.mobile-pointer:not(.desktop-runtime) .markdown-content [data-markdown="code-block-body"] {
overflow-x: auto !important; overflow-x: auto !important;