wushenghua/hapi
1
0
Fork 0
mirror of https://github.com/wu736139669/hapi.git synced 2026-08-05 06:24:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): use dedicated split breakpoint for compact tablets (#1141)

Browse Source 
* 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.
This commit is contained in:
TEEK
2026-07-24 10:54:21 +08:00
committed by GitHub
parent 3b025a69cc
commit 81934cf354
4 changed files with 32 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/index.css
+12 -4
View File
@@ -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;
}
}