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() {
         <>
             <div className="flex h-full min-h-0">
             <div
-                className={`${isSessionsIndex ? 'flex' : 'hidden lg:flex'} w-full shrink-0 flex-col bg-[var(--app-bg)]`}
+                className={`${isSessionsIndex ? 'flex' : 'hidden split:flex'} w-full shrink-0 flex-col bg-[var(--app-bg)]`}
                 style={{ '--sidebar-w': `${sidebar.width}px` } as React.CSSProperties}
             >
                 <div className="bg-[var(--app-bg)] pt-[env(safe-area-inset-top)]">
@@ -633,12 +633,12 @@ function SessionsPage() {
 
             {/* Resize handle - desktop only */}
             <div
-                className="sidebar-resize-handle hidden lg:block shrink-0"
+                className="sidebar-resize-handle hidden split:block shrink-0"
                 data-dragging={sidebar.isDragging || undefined}
                 onPointerDown={sidebar.onPointerDown}
             />
 
-            <div className={`${isSessionsIndex ? 'hidden lg:flex' : 'flex'} min-w-0 flex-1 flex-col bg-[var(--app-bg)]`}>
+            <div className={`${isSessionsIndex ? 'hidden split:flex' : 'flex'} min-w-0 flex-1 flex-col bg-[var(--app-bg)]`}>
                 <div className="flex-1 min-h-0">
                     <Outlet />
                 </div>
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)'
             }