From 5fc75d93fdc09d96d6f4060fe4a6f14df88036e9 Mon Sep 17 00:00:00 2001 From: Joseph Doherty Date: Tue, 11 Aug 2026 02:13:37 -0400 Subject: [PATCH] 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. --- ZB.MOM.WW.Theme/Directory.Build.props | 2 +- ZB.MOM.WW.Theme/README.md | 7 +++++++ .../src/ZB.MOM.WW.Theme/wwwroot/css/layout.css | 11 +++++++++++ 3 files changed, 19 insertions(+), 1 deletion(-) diff --git a/ZB.MOM.WW.Theme/Directory.Build.props b/ZB.MOM.WW.Theme/Directory.Build.props index 2ccf1e0..c8fbcf1 100644 --- a/ZB.MOM.WW.Theme/Directory.Build.props +++ b/ZB.MOM.WW.Theme/Directory.Build.props @@ -4,7 +4,7 @@ enable enable latest - 0.3.1 + 0.4.0 true diff --git a/ZB.MOM.WW.Theme/README.md b/ZB.MOM.WW.Theme/README.md index fcb2040..6ef8a2b 100644 --- a/ZB.MOM.WW.Theme/README.md +++ b/ZB.MOM.WW.Theme/README.md @@ -81,6 +81,13 @@ Served at `_content/ZB.MOM.WW.Theme/…` by the ASP.NET static-web-asset pipelin |---|---| | `css/theme.css` | Design tokens (`--accent`, `--ok`, `--warn`, …), typography, utility helpers | | `css/layout.css` | Side-rail shell layout, collapsible nav, `StatusPill` variants, card/field helpers | + +Rail-footer actions: `class="rail-btn"` is the inline default; add `rail-btn-block` +(`class="rail-btn rail-btn-block"`) for a full-width footer button. Use the modifier rather than +redeclaring `.rail-btn` in an app stylesheet — a local override that sets `width: 100%` overflows +the rail, because the width resolves against the containing block and the inline version's +`0 0.6rem` side margins are then added on top. + | `fonts/ibm-plex-sans-400.woff2` | IBM Plex Sans Regular | | `fonts/ibm-plex-sans-600.woff2` | IBM Plex Sans SemiBold | | `fonts/ibm-plex-mono-500.woff2` | IBM Plex Mono Medium | diff --git a/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/wwwroot/css/layout.css b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/wwwroot/css/layout.css index fd81e5b..ef18046 100644 --- a/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/wwwroot/css/layout.css +++ b/ZB.MOM.WW.Theme/src/ZB.MOM.WW.Theme/wwwroot/css/layout.css @@ -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 {