diff --git a/public/css/styles.css b/public/css/styles.css index 3580a73d..eb4229bd 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -108,6 +108,14 @@ body{font-family:'Inter',system-ui,sans-serif;background:var(--g50);color:var(-- /* The assistant brings its own full-bleed layout, so it takes the shell's place rather than nesting a second card inside it. */ .main-content > #assistant-tab.active{padding:0;border:none;box-shadow:none;background:transparent;overflow:visible;} +/* Admin gives up the shell's overflow for the same reason the assistant does, + but for a different effect: overflow:auto here makes this the nearest + scrolling ancestor for everything inside, while it never actually scrolls — + the document does. A sticky element then resolves bottom:0 against a box + 7,000px tall, which is to say it does not stick at all. The admin save bars + depend on it, and nothing in admin needs the clipping: every wide thing in + there already scrolls in a container of its own. */ +.main-content > #admin-tab.active{overflow:visible;} @media(max-width:768px){ .main-content{padding:8px;} .main-content > .tab-content.active{padding:12px;border-radius:12px;} @@ -1286,7 +1294,27 @@ textarea.full-input{resize:vertical;} .admin-note { font-size:12px; color:var(--g500); margin:0; line-height:1.5; } .admin-badge { font-size:11px; padding:2px 8px; border-radius:10px; background:var(--g100); color:var(--g600); white-space:nowrap; } .admin-search-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; } -.admin-save-row { border-top:1px solid var(--g100); padding-top:12px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; } +/* The Save for a card, kept in view while you are inside that card. + These cards are long — the image models sit above a slide reviewer, which + sits above the Save — so it was possible to change a setting, scroll on, and + never learn there was a button. It sticks to the bottom of the window until + the card ends, then sits where it always did. + The negative margins let the bar span the card's padding rather than floating + in a gutter; the background is opaque because content scrolls under it. */ +.admin-save-row { + border-top:1px solid var(--g100); display:flex; align-items:center; gap:8px; flex-wrap:wrap; + position:sticky; bottom:0; z-index:2; + background:var(--white,#fff); + margin:0 -16px -14px; padding:12px 16px 14px; +} +/* .card sets overflow:hidden to clip its rounded header, and overflow:hidden on + an ancestor silently disables position:sticky in every descendant. clip does + the same clipping without making the card a scroll container. Scoped to admin + cards rather than every card in the app. */ +details.card { overflow:clip; } +@media (prefers-reduced-motion: no-preference) { .admin-save-row { transition:box-shadow .15s ease; } } +/* A hint of lift only while it is actually stuck, so a card at rest looks flat. */ +.admin-save-row:not(:last-child) { box-shadow:0 -1px 0 var(--g100); } .admin-kind-switch { display:flex; flex-wrap:wrap; gap:6px; } .admin-discover-kind { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border:1px solid var(--g300); border-radius:999px; background:white; color:var(--g700); font-size:12px; font-weight:600; cursor:pointer; } .admin-discover-kind:hover { background:var(--g100); }