for
scannable inline values (version strings, commit hashes, image tags,
IDs) — none of which are critical. Override to a theme-aware color
that reads as "monospaced reference value, not error."
Per-theme overrides should set --pioneer-code-color in their theme
variable block. Default is a bright green that reads well against
Pioneer's default dark theme; light themes may want to override to a
darker variant (e.g. #15803d) for adequate contrast.
blocks (for multi-line code) inherit from their
context so syntax highlighting stays unaffected. */
.pioneer-layout code {
color: var(--pioneer-code-color, #4ade80);
}
.pioneer-layout pre code {
color: inherit;
}
/* ====== Bootstrap .badge.bg-light + .text-dark theme override ======
Bootstrap's bg-light + text-dark pairing is light-theme-only. On Pioneer's
default dark themes, bg-light renders as ~5% opacity white (essentially
transparent on the dark page) and text-dark stays near-black, making
"neutral / unknown" status pills unreadable. Bootstrap's default
.badge.border also uses --bs-border-color (light gray) which clashes on
dark themes.
Re-base text + bg + border on Pioneer theme variables so neutral badges
stay readable on every theme. Defaults use a warm orange — visually
distinct from green (Healthy), cyan (Docker / info), and red (Failed),
and orange carries an "unknown / caution / verify" semantic that fits
the Unknown status. Per-theme overrides may set
--pioneer-badge-neutral-bg / -color / -border in their variable block. */
.pioneer-layout .badge.bg-light {
background-color: var(--pioneer-badge-neutral-bg, rgba(251, 146, 60, 0.15)) !important;
color: var(--pioneer-badge-neutral-color, #fdba74) !important;
}
.pioneer-layout .badge.text-dark,
.pioneer-layout .badge .text-dark {
color: var(--pioneer-badge-neutral-color, #fdba74) !important;
}
.pioneer-layout .badge.bg-light.border {
border-color: var(--pioneer-badge-neutral-border, rgba(251, 146, 60, 0.4)) !important;
}
/* ====== Bootstrap .badge.bg-warning theme override ======
Sibling override to .bg-light above. Bootstrap's default .bg-warning is
bright #ffc107 yellow, which on Pioneer's dark themes reads as harsh
high-saturation yellow against the dark page (technically "readable" but
uncomfortable, and the only badge family that shouts at the operator).
Pair: Stale agent / Needs heal / Pending / Rolled-back / Partial-rollout
pills — all "caution / verify" semantics that should read as warm-amber,
not road-sign yellow.
Re-base bg + text on theme variables. Defaults use a low-saturation amber
tint that visually pairs with the orange neutral override above —
warning ≈ neutral but with slightly more bg saturation to keep the
"caution" weight distinct from "unknown." Per-theme overrides may set
--pioneer-badge-warning-bg / -color in their variable block.
Callsites that pair `bg-warning` with `text-dark` should drop the
`text-dark` class — the .badge.text-dark override above resolves to the
same amber, so leaving it in just adds noise. */
.pioneer-layout .badge.bg-warning {
background-color: var(--pioneer-badge-warning-bg, rgba(245, 158, 11, 0.18)) !important;
color: var(--pioneer-badge-warning-color, #fcd34d) !important;
}
/* ====== Bootstrap .badge.bg-info theme override ======
Sibling override to .bg-warning + .bg-light above. Bootstrap's default
.bg-info is bright cyan #0dcaf0 with auto-paired dark text (light-theme
default); on Pioneer's dark themes the cyan glares and any callsite that
adds `text-dark` ends up with the .badge.text-dark amber override above
on top of the cyan bg — light cyan + light amber = unreadable.
Re-base bg + text on theme variables. Defaults use a low-saturation sky
tint that pairs visually with the amber warning + orange neutral overrides
above — info ≈ informational/neutral but with cyan hue to keep the
"behind / pending / available" weight distinct from "caution" and
"unknown." Per-theme overrides may set --pioneer-badge-info-bg /
-color in their variable block.
Callsites that pair `bg-info` with `text-dark` should drop the `text-dark`
class — same convention as `bg-warning` above. */
.pioneer-layout .badge.bg-info {
background-color: var(--pioneer-badge-info-bg, rgba(56, 189, 248, 0.18)) !important;
color: var(--pioneer-badge-info-color, #7dd3fc) !important;
}
/* ============================================================================
====== MOBILE / RESPONSIVE ======
============================================================================
PIONEER MOBILE BREAKPOINT — the single shared anchor for the library.
Standardize on max-width: 768.98px (≈ Bootstrap `md`). This is the value
PioneerLayout.razor.css + PioneerNavMenu.razor.css already use for the
sidebar → stacked-nav reflow, so all hand-rolled responsive rules across the
library converge on ONE number instead of the historical drift
(768.98 / 769 / 992 / 576 / Bootstrap-md=768). See
`initiatives/pioneer-blazor-mobile-responsive/overview.md` (Phase 1).
Notes on the .98 fraction: 768.98px pairs with min-width:769px without a 1px
gap — the standard Bootstrap idiom. Keep it; just keep the base number (768)
consistent. Component-internal step breakpoints (e.g. PioneerDrawer's
992/576 sizing steps) are allowed to differ — this anchor governs the
page-level "is this a phone?" reflow, not every internal sizing step.
Phase 1 is ADDITIVE: every rule below is gated behind the mobile @media (or
the w-sm-auto min-width opt-in) and does NOT change desktop (≥769px)
behavior. Per-component @media rules in the layout .razor.css files are left
in place (they already use this exact breakpoint).
============================================================================ */
/* ---- w-sm-auto utility (NOT a Bootstrap 5 class) ----
Bootstrap 5 ships w-auto / w-25 / w-50 / w-75 / w-100 but NO responsive
w-{breakpoint}-auto variants. PioneerConfirmDialog + PioneerWizard assume
`w-sm-auto` exists (paired with `w-100`) to get "full-width on phone, auto
width on tablet+" buttons — without this definition the buttons silently
stay full-width at EVERY breakpoint (a latent desktop bug, not just mobile).
Defined UNSCOPED (global), exactly like Bootstrap's own w-* utilities, so it
works wherever those components render regardless of .pioneer-layout nesting.
`sm` = 576px per Bootstrap's scale (these are modal/wizard footer buttons,
which go auto-width one step below the page mobile anchor). */
@media (min-width: 576px) {
.w-sm-auto {
width: auto !important;
}
}
/* ---- Document-level horizontal-scroll guard (the definitive guard) ----
PioneerLayout.razor.css already clips .pioneer-layout's own horizontal
overflow at this breakpoint. But .pioneer-layout sits BELOW the document
scroller in the box tree, so a descendant that is wider than the viewport
can still widen the / box and make the DOCUMENT itself scroll
sideways — which drags the nav header + hamburger (top of the now-full-width
stacked sidebar) off-screen. The .pioneer-layout clip can't stop a scroll
that happens on an ancestor scroll container.
Clip the horizontal overflow on ONLY — deliberately NOT on .
Why body-only, not `html, body`:
- Setting overflow-x:hidden on (while overflow-y stays visible)
makes compute overflow-y to `auto` per the CSS overflow spec —
i.e. becomes its OWN scroll container. That moves scrolling off
the viewport and onto the box, which BREAKS `position: sticky;
top: 0` for the .pioneer-dev-bypass-banner (it would pin to the top of
the html padding-box that scrolls with content, not to the visible
viewport edge), and can disturb the toast/drawer fixed positioning.
- Setting overflow-x:hidden on while leaving as `visible`
PROPAGATES the clip up to the viewport (CSS propagates the 's
overflow to the viewport when the overflow is `visible`) WITHOUT
turning or into a separate scroll container. The viewport
stays the scroller, so the sticky dev-bypass banner still pins to the
top of the screen and .table-responsive boxes keep their own internal
overflow-x:auto (a descendant's independent scroll container is
unaffected by an ancestor clip).
Verified: banner stickiness preserved + internal table scroll preserved.
UNSCOPED (global) — / are outside .pioneer-layout. */
@media (max-width: 768.98px) {
body {
overflow-x: hidden;
}
}
/* ---- Long-text badge wrap on phones ----
Bootstrap badges default to white-space:nowrap, so a long-text badge — e.g.
the Loyalty "Loyalty tickets …% vs non-loyalty" pill on the Store Data Flow
Monitor — can't break and instead forces its line (and the widget card) past
the viewport width, contributing to horizontal overflow. Let badges wrap and
break unbreakable tokens at the mobile breakpoint only. Short status pills
are unaffected (they have nothing to wrap), and desktop badge behavior is
left untouched (additive ≤768.98px). */
@media (max-width: 768.98px) {
.pioneer-layout .badge {
white-space: normal;
overflow-wrap: anywhere;
}
}
/* ---- Toast container — full-width bottom-center on phones ----
Mirrors PioneerToastContainer.razor's own MOBILE BEHAVIOR doc:
xs/sm: fixed bottom-center, full-width toasts (easier to read on a phone).
md+: fixed bottom-right corner, max-width 350px.
The .pioneer-toast-container hook class already exists in the markup
(position-fixed bottom-0 end-0 p-3); only this @media rule was missing.
On md+ the markup's Bootstrap utilities (bottom-0 end-0) already park it
bottom-right, so no desktop rule is needed here. */
@media (max-width: 768.98px) {
.pioneer-layout .pioneer-toast-container {
left: 0 !important;
right: 0 !important;
}
.pioneer-layout .pioneer-toast-container > * {
width: 100% !important;
max-width: 100% !important;
}
}
/* ---- Nav-link tap targets — ≥44px on phones ----
PioneerNavLink.razor.css gives nav links height/line-height: 2rem (~32px),
under the ~44px touch-target guideline. Bump to 2.75rem (44px) inside the
mobile block only — desktop nav density is unchanged. ::deep is unavailable
in a global stylesheet, so this targets the rendered anchor structure
(.pioneer-nav-menu .nav-item a) instead of the scoped ::deep selector. */
@media (max-width: 768.98px) {
.pioneer-layout .pioneer-nav-menu .nav-item a {
min-height: 2.75rem;
line-height: 2.75rem;
}
}
/* ---- Stacked-card rows fit the viewport on phones ----
PioneerCardList (the shared "table → cards" renderer used by PioneerDataTable
/ PioneerDetailTable / PioneerLogViewer / PioneerAuditLogViewer in auto-card
mode) lays out each visible column as a label/value flex row inside a card.
The label carries flex-shrink-0 and the value can contain an unbreakable
token — a machine name / image tag / version, a URL, a long word —
which (with no min-width:0 / wrap) forces the value flex item past the card
body width, growing the card past the viewport. On the Apps page that shows
as cards wider than the screen.
These hooks (added by PioneerCardList.razor) fix it at the mobile breakpoint
only — desktop card rendering is unchanged:
- card clamps to its container (never wider than the content column);
- the label/value pair STACKS vertically so neither has to share a line —
the value gets the full card width and the label can shrink;
- the value gets min-width:0 + overflow-wrap so long tokens break/wrap
inside the card instead of pushing its width;
- text-end on the value is relaxed to left-align once stacked (a wrapped
value reads better flush-left under its label).
These are global (unscoped under .pioneer-layout) so consumer cards in every
app pick them up, matching how the other card theme rules are written. */
@media (max-width: 768.98px) {
.pioneer-layout .card.pioneer-card-list-item {
max-width: 100%;
}
.pioneer-layout .pioneer-card-list-item .card-body {
overflow-wrap: anywhere;
}
.pioneer-layout .pioneer-card-list-row {
flex-direction: column;
align-items: stretch !important;
}
/* Once stacked, the label no longer needs the right-margin gutter that
separated it from the value on the same line, and it must be allowed to
shrink (the flex-shrink-0 in the markup was for the side-by-side layout). */
.pioneer-layout .pioneer-card-list-row > .fw-semibold {
flex-shrink: 1 !important;
margin-right: 0 !important;
}
.pioneer-layout .pioneer-card-list-value {
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
text-align: start !important;
}
}