/* * Menu sheet — shared mobile bottom-sheet behavior for popup menus. * * Desktop keeps each menu's own anchored-popover styling; at the mobile * breakpoint the same element re-renders as a bottom sheet: pinned to the * viewport bottom with a rounded top, grab handle, scrim backdrop, and a * slide-up entrance. * * Contract (see shared/menu-sheet.js for the JS side): * 1. Add `menu-sheet` to the popup element, alongside its own classes. * 2. While open, render a sibling `menu-sheet-backdrop` element that * dismisses the menu on click. * 3. While open, set `menu-sheet-open` on (scroll lock; only has * effect under the sheet breakpoint). * * Consumers: site-nav account menu (shared/site-nav-account.js), * FilterDropdown (shared/filter-dropdown.js), RunActionsMenu * (account/usage-row.js). * * The 680px breakpoint matches the existing mobile-sheet precedent (the job * sources drawer in styles/job/source-dialog/source-refs.css) and the * runs-table mobile swap. Sheet selectors are doubled (.menu-sheet.menu-sheet) * on purpose: this file ships early in every page bundle (via base.css), so * the sheet must out-specify each menu's own skin rules (e.g. .rfilter-menu's * anchored positioning) that appear later in the bundle. */ .menu-sheet-backdrop { display: none; } @media (max-width: 680px) { .menu-sheet-backdrop { display: block; position: fixed; inset: 0; /* One below the sheet; the pair sits at the same layer as the other mobile sheet (job sources drawer overlay, z-index 130), above the site-nav menu layer (40). */ z-index: 130; border: 0; margin: 0; padding: 0; background: var(--surface-scrim); /* Same duration as the sheet's slide so the pair reads as one motion. */ animation: menu-sheet-backdrop-in 0.25s ease; } .menu-sheet.menu-sheet { position: fixed; inset: auto 0 0 0; z-index: 131; width: auto; min-width: 0; max-width: none; max-height: 80dvh; overflow-y: auto; /* Keep edge scrolls inside the sheet — without this, iOS chains the scroll into the page behind the scrim and rubber-bands it. */ overscroll-behavior: contain; margin: 0; /* Bottom padding clears the home indicator; the handle provides its own top spacing. */ padding: 0.5rem 0.625rem calc(0.625rem + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--line); border-radius: 1rem 1rem 0 0; background: var(--warm-panel); box-shadow: 0 -0.5rem 2rem var(--shadow-color); animation: menu-sheet-in 0.25s cubic-bezier(0.32, 0.72, 0, 1); } .menu-sheet.menu-sheet[hidden] { display: none; } /* Grab handle — sticky (not absolute) so it stays pinned to the top of the sheet when a tall menu scrolls. In-flow, so it works whether the menu is a flex column, a grid, or a plain list. */ .menu-sheet.menu-sheet::before { content: ""; position: sticky; top: 0; display: block; flex: none; width: 2.25rem; height: 0.25rem; margin: 0 auto 0.625rem; border-radius: 999px; background: var(--line-strong, var(--line)); } /* Rows read as a touch list inside a sheet: comfortable height plus a bit more inset and type than the desktop popover rows. */ .menu-sheet.menu-sheet .site-nav-account-menu-item, .menu-sheet.menu-sheet .rfilter-item, .menu-sheet.menu-sheet .account-row-menu-item { display: flex; align-items: center; min-height: 2.75rem; padding-left: 0.75rem; padding-right: 0.75rem; font-size: 0.9375rem; } body.menu-sheet-open { overflow: hidden; } } @keyframes menu-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes menu-sheet-backdrop-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .menu-sheet.menu-sheet, .menu-sheet-backdrop { animation: none; } }