feat(theme): rail-btn-block full-width rail-footer modifier (0.4.0)

HistorianGateway hand-rolled a .rail-btn override purely to make the rail-foot
sign-out button span the rail; its own comment flagged folding it into the kit.
Adds a composable modifier instead: class="rail-btn rail-btn-block".

Uses display:block + width:auto, NOT width:100%. The hand-rolled overrides set
width:100%, which resolves against the containing block and then adds .rail-btn's
0 0.6rem side margins on top, overflowing the rail by 1.2rem. width:auto fills
the same inset correctly.

Scope note: the app overrides that motivated this do more than full-width (they
also restyle font-size, padding, border, background and hover). Adopting the
modifier removes the width hack; whether to also drop the restyle is each app's
call, since it changes their rail appearance.

Version 0.3.1 -> 0.4.0 (additive). Build 0 errors, 48/48 tests, nupkg verified
to carry the new rule in staticwebassets/css/layout.css. Not yet published.
This commit is contained in:
Joseph Doherty
2026-08-11 02:13:37 -04:00
parent 3b7dbfa082
commit 5fc75d93fd
3 changed files with 19 additions and 1 deletions
@@ -197,6 +197,17 @@
color: var(--accent);
text-decoration: none;
}
/* Full-width modifier for a rail-foot action (sign in / sign out), composed as
class="rail-btn rail-btn-block". Block + width:auto fills the rail inside the
same 0.6rem inset .rail-btn already carries. Deliberately NOT width:100% —
that resolves against the containing block and then *adds* the 1.2rem of side
margin, overflowing the rail. Apps that hand-rolled this override hit exactly
that. */
.rail-btn-block {
display: block;
width: auto;
text-align: center;
}
/* ── Login card centring ─────────────────────────────────────────────────── */
.login-wrap {