` - no link anywhere in the row. That is the same gap _sidebar.twig records
* about Admin's navigation, which wires ``s to click handlers that cannot be
* middle-clicked, opened in a new tab or reached by keyboard. So here the row keeps a
* real anchor in its identifying cell, and app.js only widens the target to the rest
* of the row. With scripting off the list still navigates; it just needs the first
* cell rather than any of it.
*
* The pointer cursor is honest on these rows and only on these rows - see the
* `:not(.row-link)` correction in theme.css for the ones that are not click targets.
*/
.basic-table > tbody > tr.row-link {
cursor: pointer;
}
/* Keyboard parity: the row that has focus inside it looks like the row under the
pointer, so tabbing through a list reads the same way as hovering one. */
.basic-table > tbody > tr.row-link:focus-within {
background-color: var(--surface-hover);
}
.basic-table a.row-link-target:focus-visible {
outline: 2px solid var(--color-primary-hover);
outline-offset: 1px;
}
/* Figures line up on the right; so does the header over them. */
.basic-table .text-end {
text-align: right;
}
/* ------------------------------------------------------------- responsive */
/*
* Neither source has a mobile layout: the Design System has no media queries at
* all and Admin lays its pages out in `width: 100vw` wrappers. The portal is
* responsive today through Bootstrap, so a naive copy would be a regression -
* hence the drawer, which is new work rather than a port.
*/
@media (width < 992px) {
.app-sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 1045;
width: var(--layout-sidebar-width);
transform: translateX(-100%);
transition: transform var(--duration-medium) var(--ease-out);
}
/* The collapsed preference is a desktop one; the drawer is always full width. */
.sidebar-collapsed .app-sidebar {
width: var(--layout-sidebar-width);
}
.sidebar-collapsed .sidebar-head {
justify-content: space-between;
padding-right: var(--g-space-6);
padding-left: var(--g-space-6);
}
.sidebar-collapsed .sidebar-logo {
display: flex;
}
.sidebar-collapsed .app-sidebar .sidebar-link {
justify-content: flex-start;
padding-right: var(--g-space-8);
padding-left: var(--g-space-12);
}
.sidebar-collapsed .sidebar-label,
.sidebar-collapsed .sidebar-group-label {
position: static;
width: auto;
height: auto;
overflow: visible;
clip-path: none;
}
.sidebar-collapsed .sidebar-group-label {
padding: var(--g-space-14) var(--g-space-12) var(--g-space-6);
}
.nav-open .app-sidebar {
transform: translateX(0);
}
.nav-toggle {
display: inline-flex;
}
.nav-scrim {
position: fixed;
inset: 0;
z-index: 1040;
background-color: var(--scrim);
}
.app-main .page-container {
padding-right: var(--g-space-20);
padding-left: var(--g-space-20);
}
.topchrome {
padding: 0 var(--g-space-20);
}
.closed-search {
width: 160px;
}
}
/* Narrower still, and the trigger keeps only its icon. */
@media (width < 576px) {
.closed-search {
width: auto;
}
.closed-search .search-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
white-space: nowrap;
clip-path: inset(50%);
}
}
/*
* The panel stops hanging off the screen.
*
* It is anchored to the trigger's right edge, so its left edge lands at
* `trigger_right - 480`. Once the viewport is narrow enough that the trigger sits less
* than 480px from the left, that is negative - it measured -63px on a 390px screen - and
* Admin's `overflow-x: hidden` on html clips it instead of letting it scroll, so the
* whole left column of filters was unreachable rather than merely awkward.
*
* Below this width the panel is fixed to the viewport instead, inset by the same 20px
* the chrome uses. `position: fixed` resolves against the viewport here: the chrome is
* `sticky`, and sticky does not create a containing block for fixed descendants.
*
* 600px, not the 576px below, and the number is derived rather than chosen: the trigger's
* right edge is `viewport - 20 - account block`, and the panel needs that to be at least
* 480 + 20. It measured 497 at 600px and 473 at 576px. **If anything is added to the top
* chrome the account block grows and this boundary moves** - re-measure it rather than
* assuming 600 still holds.
*/
@media (width < 600px) {
.search-panel {
position: fixed;
top: var(--layout-topchrome-height);
right: var(--g-space-20);
left: var(--g-space-20);
width: auto;
max-width: none;
}
}
/* The drawer slides; a reduced-motion preference means it should not. */
@media (prefers-reduced-motion: reduce) {
.app-sidebar,
.sidebar-toggle-glyph {
transition: none;
}
}