n.siegfried/Project-SDE-WP-Suite
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

T7.8 - B6: the wizard's actions ride the viewport, not the page

Browse Source 
On the Constraints and Sequence steps the proposal's beside-the-fields actions
meant scrolling to save. The wizard's .step-navigation bar is now
position:sticky at the viewport bottom - the creator's sticky-bar pattern,
adapted rather than duplicated: sticky (not the creator's fixed) because the
bar lives inside the wizard's grid column, keeps its slot in the flow, and
therefore CANNOT obscure a field at any width - no padding arithmetic to get
wrong. Opaque background, top border and the shared --wp-shadow-sticky token
so content scrolling beneath it reads as beneath it.

The T4.4/B5 save-state indicator already mounted in this bar; it now rides the
viewport with the buttons, which is the "shows the save state" criterion.

Verification (each probe run alone): NEW tests/sticky_bar_check.py 12/12 - a
primary action inside the viewport on all 12 steps unscrolled at a 700px
viewport (short on purpose: both named steps genuinely overflow, asserted),
still visible fully scrolled, nothing obscured at 390px. Regression:
stepper_check ALL PASS.

Items: B6

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Nick Siegfried
2026-08-19 11:14:33 -07:00
parent c084f730b3
commit e3de3c7c00
3 changed files with 180 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
html/work-package-suite-styles.css
View File

@@ -741,15 +741,29 @@ body {
/* .field-error is declared once, in theme-light.css — the launcher's create form
and T5.8's step validation use the same component. */
/* NAVIGATION */
/* NAVIGATION
B6 / T7.8: sticky, the creator's pattern. On the Constraints and Sequence
steps the proposal's beside-the-fields actions meant scrolling to save; the
bar now rides the bottom of the viewport while a tall step scrolls, and sits
in its natural place on short ones. position:sticky (not the creator's
fixed) because the bar lives inside the wizard's grid column: sticky keeps
its slot in the flow, so it can never obscure a field at any width - there
is nothing to pad around. The T4.4 save-state indicator already mounts in
this bar (B5) and rides along. */
.step-navigation {
grid-column: 2;
grid-row: 2;
position: sticky;
bottom: 0;
z-index: 30;
display: flex;
gap: 1rem;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
background: var(--bg-card);
border-top: 1px solid var(--border);
box-shadow: var(--wp-shadow-sticky);
border-radius: 0;
box-shadow: var(--shadow);
}