webui: the dialog auto-close queries the same media condition as the CSS

min-width: 701px is not the complement of the stylesheet's
max-width: 700px: at fractional viewport widths between the two (normal
at desktop zoom levels) the sheet was CSS-hidden but still modal --
the inert-lock this fix exists to remove, surviving in a crack. The JS
now watches max-width: 700px, the exact condition that shows the
sheet, and closes when it stops matching.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
jolavillette 2026-09-10 22:01:10 +02:00
parent 15428791fe
commit d01aefbc70

View File

@ -15,9 +15,14 @@ const Dialog = () => {
// but showModal() keeps the whole page inert regardless -- rotating to
// landscape with a sheet open left the UI untappable with no visible
// way out. Crossing into the desktop layout closes the sheet instead.
desktopQuery = window.matchMedia('(min-width: 701px)');
// The SAME condition the stylesheet uses to show the sheet
// (max-width: 700px), so JS and CSS agree at every width -- a
// min-width: 701px mirror leaves a fractional crack (700 < w < 701,
// common at desktop zoom levels) where the sheet is hidden but still
// modal.
desktopQuery = window.matchMedia('(max-width: 700px)');
onLayoutChange = (event) => {
if (event.matches) {
if (!event.matches) {
onclose();
m.redraw();
}