is empty (~4px). The library already hides
the empty message for label-position="before"; this does the same for the default "above" and
drops the row from the grid so no gap is left. A real validation message makes the div
non-empty, so this never hides one.
Point 2 is limited to fields whose label sits ABOVE. A checkbox/switch/radio field puts its label
beside the control (label-position="after"), with its own grid ('input label' / 'message message');
overriding that would drop the label on top of the box. The margin reset (point 1) is harmless for
those, so it applies to every field.
.field-grid: same reset for a plain CSS grid/flex of form fields whose parent owns the spacing
(gap), e.g. the item form's Basic Information and Units of Measurement blocks. Without it each field
adds its own 12px margin and the fields sit at different heights (a text area, a text input and an
autocomplete differ by a few px, and a checkbox beside a select lands ~15px low). */
:is(.filter-row, .field-grid) fluent-field {
margin-block: 0;
}
:is(.filter-row, .field-grid) fluent-field:not([label-position='after'], [label-position='before'], [label-position='below']) {
grid-template-areas: 'label' 'input';
}
:is(.filter-row, .field-grid) fluent-field:not([label-position='after'], [label-position='before'], [label-position='below']) > [slot='message']:empty {
display: none;
}
/*
is a Web Component — before its JS registers/upgrades it, the browser has no
shadow-DOM clipping to apply yet, so an avatar photo passed via Image (e.g.
CurrentUserService.AvatarDataUri, a full-resolution uploaded photo) can flash at its full native
pixel size for a frame or two, right as the interactive circuit takes over from the
server-prerendered markup. :not(:defined) targets exactly that pre-upgrade window; once the
element upgrades, its own real styling takes over and this stops matching. 64px covers the
largest AvatarSize this app actually uses (ProfileSettings' Size64) — every other usage
(Size24/32/40) just renders slightly smaller than its final size for that one frame, which is
harmless since the whole point is only to bound it, not match it exactly.
App.razor's #app-boot-loader is the other half of this fix — it covers the very first paint
until is confirmed defined, so this rule is mostly a safety net for any
later-mounted avatar (e.g. opening a dialog) rather than the main fix for first load. */
fluent-avatar:not(:defined) {
display: inline-flex;
overflow: hidden;
width: 64px;
height: 64px;
max-width: 64px;
max-height: 64px;
border-radius: 50%;
vertical-align: middle;
}
fluent-avatar:not(:defined) img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Row "Actions" menus (e.g. Printing Services list) rendered narrower than their longest item,
clipping labels ("Hide from customer portal" -> "Hide from custome"). FluentMenu v5 exposes no
Width parameter, its default max-width doesn't actually let the list grow to fit a long item
(the item content slot is flex-clamped), and the list renders in a popover outside the
triggering component's DOM subtree so component-scoped (::deep) CSS can't reach it — same
reason the FluentAutocomplete rule above is global. Give the list a wider floor so the longest
labels this app uses fit without truncation. */
fluent-menu-list {
min-width: 248px;
}
/* FluentMenu v5's popover anchors its LEFT edge to the trigger and opens rightward; its built-in
position-try flip isn't kicking in reliably, so a row "Actions" (⋮) menu in the right-hand
column of a wide table opens off the right edge of the viewport with its labels clipped.
Right-align the popover to its trigger instead (open leftward — the conventional direction for
an overflow menu), and keep a flip fallback so a menu near the LEFT edge still opens rightward.
Light-DOM rules on the custom element win over its shadow `:host` styles; `anchor()` is only
honoured on browsers with native CSS anchor positioning (Chromium/Edge) — elsewhere the whole
declaration is dropped and Fluent's own fallback positioning stands, so this is safe. */
fluent-menu-list[popover] {
inset-inline-start: auto;
inset-inline-end: anchor(end);
position-try-fallbacks: flip-inline, flip-block, flip-inline flip-block;
}
/* Flat cards app-wide: every FluentCard renders without a drop shadow, whatever its Shadow
parameter says (and on hover for selectable cards). One global rule instead of
Shadow="CardShadow.None" on each card, so new pages are flat by default. Overlays that are not
cards (dialogs, drawers, menus, the mobile sidebar) keep their own shadows. */
.fluent-card,
.fluent-card:hover {
box-shadow: none !important;
}
/* Reusable KPI cards (Components/Shared/KpiCards): one 16px corner radius for all of them, matching
the dashboard panels. Has to live here, not in each card's .razor.css: the card class is passed to
FluentCard (a child component) via Class="...", so the scoped rules never match the card element. */
.fluent-card.basic-value-card,
.fluent-card.alert-card,
.fluent-card.comparison-card,
.fluent-card.mini-chart-card,
.fluent-card.split-value-card,
.fluent-card.status-count-card,
.fluent-card.target-progress-card,
.fluent-card.trend-card {
border-radius: 16px !important;
}
/* Topbar profile menu (AdminTopBar.razor, FluentPopover AnchorId="profile-trigger").
FluentPopover v5's adjustDialogPosition() picks its horizontal side backwards: it opens
rightward whenever there is room on the trigger's LEFT, so an anchor at the far right of the
topbar always opens off-screen (exposed once the NAM AI button that used to sit to its right
was removed). The positioned element is the shadow , styled inline by that
JS, so !important is needed to win over the inline left. Pin it to the right edge instead. */
fluent-popover-b[anchor-id="profile-trigger"]::part(dialog) {
left: auto !important;
right: 12px !important;
}