/* SURFLESSONS4YOU r30 — wizard round 3. Pastel #603 (action-bar stability), #608 (flexible-time checkbox + note), #615 (template-applied confirmation). Root causes are documented in sl4u-r30-wizard3.php; only the mechanics are noted here. Loaded on /post-a-lesson/, /onboarding-lesson/, ?post_id= and on single lesson pages. */ /* ══ #603 — the step-3 action bar ══════════════════════════════════════════ The floors themselves are set inline by sl4u-r30-wizard3.js from a real off-screen measurement of each button's busiest label. These two rules only keep the row from rubber-banding around them: nothing in `.ts-form-footer` may be the sole flex-grower, and no button may drop below its content. */ @media (min-width: 720px) { html body .sl4u-post-lesson .ts-form-footer .sl4u-r6-btn, html body .sl4u-post-lesson .ts-form-footer .ts-save-changes { flex: 0 0 auto !important; white-space: nowrap; justify-content: center !important; } /* `.ts-nextprev` (`flex: 1 1 220px`, sl4u-round4-post-lesson.php:348) was the only growing item in the row, so it rubber-banded on every width change to its right. Pin it and push the action group out with an auto margin instead. */ html body .sl4u-post-lesson .ts-form-footer .ts-nextprev { flex: 0 0 auto !important; margin-right: auto !important; } /* The floors themselves. `--sl4u-r30-w-*` is written on by sl4u-r30-wizard3.js from a real off-screen measurement of each button's busiest label, so a button Vue re-creates mid-save is already the right size on its first layout instead of flickering at its natural width. Until the measurement lands the fallback is 0px, i.e. today's behaviour. */ html body .sl4u-post-lesson .ts-form-footer .ts-prev { min-width: var(--sl4u-r30-w-prev, 0px) !important; } html body .sl4u-post-lesson .ts-form-footer .ts-next { min-width: var(--sl4u-r30-w-next, 0px) !important; } html body .sl4u-post-lesson .ts-form-footer .sl4u-r6-preview { min-width: var(--sl4u-r30-w-preview, 0px) !important; } html body .sl4u-post-lesson .ts-form-footer .sl4u-r6-tpl { min-width: var(--sl4u-r30-w-tpl, 0px) !important; } html body .sl4u-post-lesson .ts-form-footer .ts-save-changes { min-width: var(--sl4u-r30-w-publish, 0px) !important; } /* Voxel's pending branch takes the label out of flow (`.ts-loader-wrapper { position:absolute }`, forms.css), which is what collapsed Publish to its padding. The floor above already stops that; this only keeps the box from being forced narrower. */ html body .sl4u-post-lesson .ts-form-footer .ts-save-changes.vx-pending { width: auto !important; } } /* ══ #615 — a list of templates, not a select + three buttons ══════════ R32 reply: "can it just be blank, template x, template y … and when I click on it it simply opens up? no more buttons". The `