noNameWEB/redmine-theme-tonalmine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: mobile navigation drawer overlays content instead of pushing it

Browse Source 
Core's responsive.css shifts #wrapper and #header aside when the flyout
opens. Make it an M3 modal drawer: fixed over the page with a scrim that
closes it on tap via core's existing #main click handler.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Andreas Reinhold / reini
2026-10-05 11:22:13 +02:00
co-authored by Claude Opus 5.5
parent e1906611d9
commit b6654f31e7
1 changed files with 23 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tonalmine/stylesheets/mobile.css
+23 -1
View File
@@ -46,13 +46,35 @@
mask: url(../images/menu.svg) center / 24px no-repeat; mask: url(../images/menu.svg) center / 24px no-repeat;
} }
/* Flyout: navigation drawer */ /* Flyout: M3 modal navigation drawer. It slides over the page behind a scrim instead of
core's push, which shoves page and header off screen. Tapping the scrim hits #main,
which core's responsive.js already binds to close the flyout. */
html.flyout-is-active :is(#wrapper, #header) { inset-inline-end: 0; }
html .flyout-menu { html .flyout-menu {
position: fixed;
inset-block: 0;
z-index: 10001; /* over core's fixed header (9999) and the scrim */
block-size: auto;
overflow-y: auto;
overscroll-behavior: contain;
visibility: hidden;
transition: inset-inline-end 250ms cubic-bezier(0.2, 0, 0, 1), visibility 250ms;
border-start-start-radius: var(--md-sys-shape-corner-large);
border-end-start-radius: var(--md-sys-shape-corner-large);
box-shadow: var(--md-sys-elevation-level1);
background-color: var(--md-sys-color-surface-container-low); background-color: var(--md-sys-color-surface-container-low);
color: var(--md-sys-color-on-surface); color: var(--md-sys-color-on-surface);
padding-inline: 12px; padding-inline: 12px;
box-sizing: border-box; box-sizing: border-box;
} }
html.flyout-is-active .flyout-menu { inset-inline-end: 0; visibility: visible; }
html.flyout-is-active #main::after {
content: '';
position: fixed;
inset: 0;
z-index: 10000;
background-color: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent);
}
html .flyout-menu h3 { html .flyout-menu h3 {
block-size: auto; block-size: auto;
margin-block: 16px 4px; margin-block: 16px 4px;