IS .RaLayout-contentWithSidebar — the flex row that holds the sidebar and the content column. `host` is only found when input[name="color_accent"] is already in the DOM, which is false on the #/app_settings LIST page, so opening the list first strands the theme card [data-s8k-tc] and the platform-env card [data-s8k-pe] as extra flex items beside the page. The mount is decided once per session (tick() returns early while the card exists), so it stays stranded through list -> edit. The s8k-admin-fit block above then widens #root > .layout to fit-content to keep those cards whole, and body{overflow-x:hidden} makes the excess unreachable: measured scrollWidth 1595/1754 vs clientWidth 1366, with the THEME and LOGIN & BEHAVIOUR tabs covered by the stranded card and the Platform environment card cut off. Fix: take the stranded cards out of the flex row and release the two fit-content fallbacks that only existed to accommodate them. A correctly mounted card (inside #tabpanel-3 on the THEME tab) is NOT a child of .RaLayout-contentWithSidebar and is left completely untouched. */ #root .RaLayout-contentWithSidebar > :is([data-s8k-tc], [data-s8k-pe]) { display: none !important; } #root .RaLayout-contentWithSidebar:has(> [data-s8k-tc], > [data-s8k-pe]) > .RaLayout-content { min-width: 0; } #root > .layout:has(.RaLayout-contentWithSidebar > :is([data-s8k-tc], [data-s8k-pe])) { min-width: 0; } /* While a theme card is stranded (and therefore hidden by the rule above) the THEME tab would otherwise have no colour controls at all, because admin-panel.js hides the three native colour fields for it with an inline style. Put those back — inline display:none loses to !important — so the tab stays usable. Scoped to the stranded case only. */ #root .RaLayout-contentWithSidebar:has(> [data-s8k-tc]) .RaLayout-content .MuiFormControl-root:has(> .MuiInputBase-root > input[name="color_accent"], > .MuiInputBase-root > input[name="color_primary"], > .MuiInputBase-root > input[name="color_background"]) { display: inline-flex !important; } /* ==== /s8k-settings-layout-fit ==== */ /* ==== s8k-a11y-focus ==== */ /* 1. Visible keyboard focus (WCAG 2.4.7). MUI ButtonBase ships `outline: 0` from an emotion class that is injected into AFTER this stylesheet, so the generic `:focus-visible` rule earlier in this file loses the cascade tie and every button, tab, menu item and icon button focuses invisibly (measured: outline "none 0px" on all of them, including tabs that do carry .Mui-focusVisible). The sidebar entries admin-panel.js clones ([data-s8k-ap]) are plain DOM nodes that React never marks .Mui-focusVisible, so they have no indicator at all. Re-assert the ring with !important on the real :focus-visible pseudo-class, which the browser only matches for keyboard focus — a mouse click still draws nothing. outline-offset is negative so the ring is painted inside the element and is never clipped by .RaSidebar-paper{overflow:hidden} or by a scrolling tab strip. */ #root :is(.MuiButtonBase-root, .MuiTab-root, [role="tab"], .RaMenuItemLink-root, .MuiMenuItem-root, .MuiIconButton-root, .MuiChip-root):focus-visible, #s8k-ap :is(button, select, a[href], [tabindex]):focus-visible, body > #s8k-ap-modal :is(button, select, a[href], [tabindex]):focus-visible { outline: 2px solid #c4b5fd !important; /* >= 5.4:1 on every admin surface */ outline-offset: -2px !important; } /* A light-violet ring disappears on the brand gradient: use the dark ink there (>= 3.6:1). */ #root :is(.MuiButton-contained, .MuiButton-containedPrimary, .MuiFab-root):focus-visible, #s8k-ap :is(.btn.primary, .btn.newbtn):focus-visible { outline-color: #0b0a1f !important; } /* 2. Tab-focus must not scroll a field under the sticky save bar of the App Settings overlay (#s8k-ap .set-foot: sticky, bottom 14px, 79px tall -> it covers the bottom 93px of the viewport, and seven controls were measured landing behind it). scroll-padding has no paint effect at all; it only tells scroll-into-view where the usable area ends. It must sit on the scrolling element, which for this page is the root element. */ html:has(#s8k-ap .set-foot) { scroll-padding-top: 58px; scroll-padding-bottom: 104px; } @media (max-width: 600px) { html:has(#s8k-ap .set-foot) { scroll-padding-bottom: 152px; } } /* 3. Contrast (WCAG 1.4.3 text, 1.4.11 non-text). Targeted overrides only — no brand token is changed. Measured before -> after at 1366x768: placeholder #6b6780 3.32-3.46:1 and UA #757575 3.43:1 -> #9691ad 5.2-6.2:1 #s8k-ap .txt border rgba(255,255,255,.13) 1.47:1 -> .38 3.56:1 #s8k-ap .apis .txt rgba(255,255,255,.16) 1.64:1 -> .38 3.5:1 #s8k-ap-modal .txt rgba(255,255,255,.14) 1.50:1 -> .38 3.57:1 MUI notched outline rgba(255,255,255,.16) 1.65:1 -> .38 3.52:1 The border really is load-bearing here: the input fill is only 1.06-1.10:1 against the surface it sits on, so the 1px border is the only thing that identifies the control. */ #s8k-ap :is(input, textarea)::placeholder, body > #s8k-ap-modal :is(input, textarea)::placeholder, #root .MuiInputBase-input::placeholder { color: #9691ad !important; opacity: 1 !important; } #s8k-ap :is(.txt, .apis .txt), body > #s8k-ap-modal :is(input.txt, select.txt, textarea.ta) { border-color: rgba(255,255,255,.38) !important; } /* hover stays visibly brighter than the new resting value (it was .13 -> .22; now .38 -> .52), and focus keeps exactly the colour admin-panel.js:366/411/413/499 already gives it. */ #s8k-ap :is(.txt, .apis .txt):hover, body > #s8k-ap-modal :is(input.txt, select.txt, textarea.ta):hover { border-color: rgba(255,255,255,.52) !important; } #s8k-ap :is(.txt, .apis .txt):focus, body > #s8k-ap-modal :is(input.txt, select.txt, textarea.ta):focus { border-color: var(--acc, #a78bfa) !important; } /* :not(.Mui-focused):not(.Mui-error) so the violet focus outline (admin-theme.css:208) and MUI's red error outline keep winning — only the resting hairline is raised. */ #root .MuiOutlinedInput-root:not(.Mui-focused):not(.Mui-error) .MuiOutlinedInput-notchedOutline { border-color: rgba(255,255,255,.38) !important; } /* ==== /s8k-a11y-focus ==== */ /* ==== s8k-native-save-sticky ==== */ /* The native react-admin Save toolbar is the last child of the form, position:relative and not sticky, so on a 1366x768 screen it sits at y=927 on #/app_settings/1 (document height 979) and at y=714 on #/hosts/create (document height 779): off-screen until you scroll to the very bottom. Pin it to the bottom of the viewport while the form is longer than the viewport; once the form bottom is reached it settles back into its normal place. .RaToolbar-mobileToolbar (<600px) is already position:fixed and is not touched. */ #root form .RaToolbar-desktopToolbar { position: sticky; bottom: 0; z-index: 3; border-top: 1px solid rgba(255, 255, 255, .10); box-shadow: 0 -14px 26px -18px rgba(0, 0, 0, .9); } /* The form card is a MuiPaper with overflow:hidden, which makes it the sticky element's scrollport — a scrollport that never scrolls, so position:sticky alone is a no-op (verified: toolbar stays at y=927). overflow:clip clips exactly the same way but does NOT create a scroll container, so the toolbar sticks to the viewport again. */ #root .MuiCard-root:has(form .RaToolbar-desktopToolbar) { overflow: clip; } /* Keyboard focus must not scroll a field under the bar this block just pinned. scroll-padding has no paint effect; it only moves where scroll-into-view stops. */ html:has(#root form .RaToolbar-desktopToolbar) { scroll-padding-top: 58px; scroll-padding-bottom: 88px; } /* ==== /s8k-native-save-sticky ==== */