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/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)'
             }