From 81934cf3544be6e884458c2ecdf7cc9ae0ac4b34 Mon Sep 17 00:00:00 2001 From: TEEK Date: Fri, 24 Jul 2026 10:54:21 +0800 Subject: [PATCH] fix(web): use dedicated split breakpoint for compact tablets (#1141) * fix(web): use dedicated split breakpoint for compact tablets Some compact Android tablets (e.g. OPPO Pad mini) report a landscape CSS viewport below Tailwind's `lg` (1024px) despite having enough physical screen space, so the sessions layout fell back to a single column. Add a dedicated `split` breakpoint at 920px and use it for the sessions split layout and the sidebar width/resize CSS, leaving the global `lg` breakpoint (and all other pages) untouched. * fix(web): cap sidebar width against viewport on compact split A persisted sidebar width (up to 600px from resizing on desktop) could shrink the detail pane to 316px at the new 920px split breakpoint, below the previous 1024px worst case of 420px. Cap the sidebar width at min(var(--sidebar-w), calc(100vw - 424px)) so the detail pane keeps at least 420px down to 920px, with no effect on desktop. * fix(web): seed sidebar drag from rendered width When the compact-split viewport cap renders the sidebar narrower than the persisted width, dragging the handle to shrink it had a dead zone until the stored width fell below the rendered width. Seed the drag from the sidebar's rendered width so it responds immediately; unchanged on desktop where rendered and stored widths match. --- web/src/hooks/useSidebarResize.ts | 9 ++++++++- web/src/index.css | 16 ++++++++++++---- web/src/router.tsx | 6 +++--- web/tailwind.config.ts | 9 +++++++++ 4 files changed, 32 insertions(+), 8 deletions(-) diff --git a/web/src/hooks/useSidebarResize.ts b/web/src/hooks/useSidebarResize.ts index 4606ba5b..75e6d82e 100644 --- a/web/src/hooks/useSidebarResize.ts +++ b/web/src/hooks/useSidebarResize.ts @@ -27,9 +27,16 @@ export function useSidebarResize() { const onPointerDown = useCallback((e: React.PointerEvent) => { e.preventDefault() + // The sidebar (the handle's previous sibling) can render narrower than the + // stored width when the viewport cap in index.css kicks in on a compact + // split. Seed the drag from the actual rendered width so there's no dead + // zone before the sidebar responds. Falls back to the stored width when the + // element or its measured width is unavailable (e.g. non-DOM test env). + const sidebarEl = e.currentTarget.previousElementSibling as HTMLElement | null + const renderedWidth = sidebarEl?.getBoundingClientRect().width activePointerIdRef.current = e.pointerId startXRef.current = e.clientX - startWidthRef.current = width + startWidthRef.current = renderedWidth || width setIsDragging(true) }, [width]) diff --git a/web/src/index.css b/web/src/index.css index d515e443..3192c247 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -352,8 +352,11 @@ body { } } -/* Desktop sidebar: use custom width from CSS variable */ -@media (min-width: 1024px) { +/* Desktop sidebar: use custom width from CSS variable. + Kept in sync with the Tailwind `split` breakpoint (see tailwind.config.ts) + so the sidebar width/resize applies as soon as the split view appears on + compact tablets. */ +@media (min-width: 920px) { .desktop-scrollbar-left { direction: rtl; } @@ -362,9 +365,14 @@ body { direction: ltr; } - /* Apply resizable width to sidebar */ + /* Apply resizable width to sidebar. + Cap it against the viewport so a wide persisted width (up to 600px, from + resizing on desktop) can't crush the detail pane on a compact split. + 424px = 420px min detail pane + 4px resize handle, which preserves the + previous 1024px worst case (1024 - 600 - 4 = 420) down to 920px. The cap + is a no-op on desktop where 100vw - 424px exceeds the stored width. */ div[style*="--sidebar-w"] { - width: var(--sidebar-w) !important; + width: min(var(--sidebar-w), calc(100vw - 424px)) !important; } } diff --git a/web/src/router.tsx b/web/src/router.tsx index 92745de6..db52db98 100644 --- a/web/src/router.tsx +++ b/web/src/router.tsx @@ -546,7 +546,7 @@ function SessionsPage() { <>
@@ -633,12 +633,12 @@ function SessionsPage() { {/* Resize handle - desktop only */}
-
+
diff --git a/web/tailwind.config.ts b/web/tailwind.config.ts index 05ecb231..893b7fda 100644 --- a/web/tailwind.config.ts +++ b/web/tailwind.config.ts @@ -4,6 +4,15 @@ export default { content: ['./index.html', './src/**/*.{ts,tsx}'], theme: { extend: { + screens: { + // Dedicated split breakpoint for the sessions layout. Some compact + // Android tablets (e.g. OPPO Pad mini) report a landscape CSS + // viewport below Tailwind's `lg` (1024px) despite having enough + // physical space, so they fall back to single-column. 920px lets + // those tablets show the split view while staying clear of phone + // landscape widths. + split: '920px' + }, maxWidth: { content: 'var(--content-max-w, 960px)' }