. Only
overriding .mud-table-cell's color directly reaches them.
- .emr-shift-poc-type / .emr-important set their own explicit color directly on the symptom
name / type-tag elements (same collision class as .emr-issue-group-heading above), so
they need their own overrides too -- the .mud-table-cell override above does not reach them,
since they have an explicit rule of their own blocking inheritance the same way. */
.emr-row-above-goal {
background-color: color-mix(in srgb, var(--mud-palette-error) 8%, transparent) !important;
font-weight: 600;
}
.emr-row-above-goal .mud-table-cell,
.emr-row-above-goal .emr-shift-poc-type,
.emr-row-above-goal .emr-important {
color: var(--mud-palette-error) !important;
}
/* Shift POC tab (legacy "shiftPOC_original.png"): careplan section header is a solid purple bar
with white text, matching .emr-dialog's title-bar / .emr-patient-search-header's established
convention. MudExpansionPanel's class names differ from the "expansion-panel" name you'd guess
from the component name -- .mud-expand-panel-header, confirmed via a render probe rather than
assumed. Scoped to .emr-shift-poc-panels so this never leaks onto an unrelated expansion panel
elsewhere in the app. */
.emr-shift-poc-panels .mud-expand-panel-header {
background-color: var(--mud-palette-primary);
color: var(--mud-palette-white);
border-radius: 0;
padding: 6px 16px;
min-height: 0;
}
.emr-shift-poc-panels .mud-expand-panel-header .mud-expand-panel-icon {
color: var(--mud-palette-white);
}
/* The careplan name itself -- NOT .emr-section-header, whose purple text color would sit
invisibly on this same bar's purple background (developer-reported 2026-09-08 "missing the
careplan name" -- it was rendering, just the same color as its own background). */
.emr-shift-poc-careplan-name {
color: var(--mud-palette-white);
font-weight: 700;
}
/* The "Symptoms / Needs / PONs" / "Interventions" sub-header band under each careplan -- a
light tint of the same purple, bold uppercase purple text (legacy mock). text-transform, not
an uppercase string literal, so the underlying text stays normal-case for anything reading the
DOM (tests, screen readers). */
.emr-shift-poc-subheader {
background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
color: var(--mud-palette-primary);
font-weight: 700;
text-transform: uppercase;
padding: 4px 8px;
}
/* Type column ("PON" / "Need" / "Symptom") -- muted, distinct from the bold symptom/intervention
name next to it (legacy mock). */
.emr-shift-poc-type {
color: var(--mud-palette-text-secondary);
}
/* Every width, not just >960px: same reason as .landing-patient-grid .mud-table-root below —
an auto-layout table only obeys the fixed-layout percentages once it also fills its container,
otherwise it just shrinks to its content and the percentages never engage. Cells ellipsize
rather than wrap so a long value degrades to "…" instead of forcing the column wider. */
.emr-workitems-grid .mud-table-root {
width: 100%;
}
.emr-workitems-grid .mud-table-cell {
overflow: hidden;
text-overflow: ellipsis;
}
/* Status chip opts out of the ellipsize-by-default rule above — B7's status chip has no max-width
and must never clip to "…", even if the sized column comes in a few px under its target. */
.emr-workitems-grid .mud-table-cell.emr-col-status {
overflow: visible;
text-overflow: unset;
}
/* Fixed-width grid columns for the workitems grid. */
.emr-col-nowrap { white-space: nowrap; }
.emr-col-word-break { word-break: break-all; }
/* Entries tab grid (EntriesTab) — legacy IntervalChartHome.razor's MudSimpleTable inline-styles
every
to font-weight:700; MudBlazor 8 ships no bold-header utility, so the grid opts in via
this class instead of per-column HeaderClass. Replaces the removed .emr-col-header-strong,
which only covered one column. */
.emr-entries-grid th {
font-weight: 700;
}
/* Fixed-width grid columns for the Entries tab grid (legacy | widths). Interventions/Elaborations
is intentionally unset — it absorbs the remaining row width, same as legacy.
Symptom is the one deliberate departure: legacy sets 150px, which wraps a typical authored
need ("Discourage factors that provoke PAIN symptoms") onto four lines. 220px brings that to
two, and the width comes out of Interventions/Elaborations, which absorbs the remainder
(developer-directed 2026-09-02). */
.emr-col-entries-time { width: 110px; }
.emr-col-entries-careplan { width: 150px; }
.emr-col-entries-symptom { width: 220px; }
.emr-col-entries-severity { width: 110px; }
.emr-col-entries-status { width: 100px; }
.emr-col-entries-by { width: 130px; }
/* Entries tab Interventions/Elaborations cell — legacy Style="font-weight: 700;" with no color
override. NOT .emr-important: that class also forces the primary/purple color, which legacy
does not use here. */
.emr-entries-detail {
font-weight: 700;
}
/* Shared expander-column width (HierarchyExpanderColumn's HeaderClass, plan §B1 item 6 — renamed
from emr-col-rowaction so PatientGrid's pin/UE + favorite columns, which keep that name, can never
collide with the expander again). Unscoped so every grid that renders the widget and does not
declare its own per-band width (the ~10 grids untouched by this plan) keeps its current 40px
expander, same as the old .emr-col-rowaction base rule did. Grids/bands with their own measured
width (e.g. .emr-workitems-grid--tablet .emr-col-expander below) override it by
specificity. */
.emr-col-expander { width: 40px; }
/* Fixed-width grid columns for the landing patient grid. Replaces per-column HeaderStyle=
inline widths so the phone rules below can relax them without !important. */
.emr-col-rowaction { width: 40px; }
.emr-col-name { min-width: 140px; }
.emr-col-mrn { width: 90px; }
.emr-col-patient-status { width: 90px; }
.emr-col-statusdate { width: 100px; }
.emr-col-loc { width: 50px; }
.emr-col-institution { width: 110px; }
.emr-col-program { width: 75px; }
.emr-col-team { width: 75px; }
.emr-col-fc { width: 55px; }
/* Every width, not just phone. The name renders inside a MudButton, and MudBlazor buttons are
white-space:nowrap — a long name becomes one unbreakable box that stretches the Name column past
its 140px and pushes the right-hand columns out of the viewport. Above phone width there is no
phone card to fall back on and HorizontalScrollbar="false" leaves nothing to scroll, so on a
tablet (Breakpoint.Sm/Md, 600-1279px, where IsPhone is false) those columns are simply clipped.
Wrapping the name to a second line inside the column it already has is what keeps the table narrow. */
.landing-patient-grid .emr-link.mud-button-root {
white-space: normal;
text-align: left;
}
/* All-columns layout, >=960px (bug 4281) — was >=1280px (desktop-only) until the wide (Md,
960-1399px) Tablet sub-band started rendering all columns too instead of folding six of them
(PatientGrid.razor.cs FoldsColumns). At Md the grid never carries the `.landing-patient-grid--tablet`
modifier (that class is Sm-only now — see the `--tablet` block below), so extending this block's
media query down to 960px is safe: the two blocks never both match the same element. Tablet
(Sm only now, 600-959px) gets its own folded column set below (.landing-patient-grid--tablet)
instead of these percentages. Legacy fits all ten columns at every width by letting the columns
divide the table; ours declared ~865px of fixed px, and an auto-layout table grows past its
container to honour them. With HorizontalScrollbar="false" and .emr-patient-panel
overflow:hidden there is nothing to scroll, so whatever does not fit is clipped outright — which
is why iPad loses the right-hand columns instead of scrolling to them, and why landscape can lose
MORE than portrait: a fixed-width table does not adapt, so what survives depends on where the
clip falls, not on how much room there is.
Fixed layout + percentages makes the table mathematically unable to exceed its container: the
columns shrink together and cells ellipsize (.landing-patient-grid .mud-table-cell above). Same
technique as the phone block below, same reason percentages rather than px + auto. Percentages
fit the ~950px content width a 1080px iPad-landscape viewport leaves after the mini drawer, same
as any wider desktop viewport, because they are proportional rather than fixed px.
Cell padding standardized to 16px horizontal (6px 8px), 12px on the first cell — audit §3's
finding that inconsistent padding (this grid's old 8px vs. workitems' inherited 40px dense
padding) was itself a cause of the wrap/dead-space defects (plan §A2). The last cell's 12px
padding-right comes from the shared .mud-table-cell:last-child rule above, not repeated here.
Widths below are `target px ÷ reference width`, not hand-tuned round numbers (plan §A4/§B5):
desktop reference is 1306px (measured/derived, see plan §A4, OQ-2), iPad reference is 890px
(measured on-device at a 1024px viewport). Favorite now carries its own .emr-col-favorite class
(plan §B1 item 6) instead of sharing .emr-col-rowaction with the pin/UE column and being narrowed
via a fragile :last-of-type selector — that selector broke the moment an iPad expander column
(also historically .emr-col-rowaction-shaped) entered the picture. Widths sum to 100 in each tier.
MRN bumped 6%->7% (Name 30%->29%) when this block's floor dropped to 960px (bug 4281): at the
wide-tablet content width (~950px, iPad landscape with mini drawer) 6% (~57px) clipped an 8-digit
MRN's ~64px content — confirmed with a static repro of this exact markup/CSS pair against real
Chromium layout; Name has slack to give up a point without wrapping. */
@media (min-width: 960px) {
.landing-patient-grid .mud-table-root {
table-layout: fixed;
}
.landing-patient-grid .mud-table-cell {
padding: 6px 8px;
}
.landing-patient-grid .mud-table-cell:first-child {
padding-left: 12px;
}
.landing-patient-grid .emr-col-rowaction { width: 9%; }
.landing-patient-grid .emr-col-name { width: 29%; min-width: 0; }
.landing-patient-grid .emr-col-mrn { width: 7%; }
.landing-patient-grid .emr-col-patient-status { width: 8%; }
.landing-patient-grid .emr-col-statusdate { width: 9%; }
.landing-patient-grid .emr-col-loc { width: 5%; }
.landing-patient-grid .emr-col-institution { width: 12%; }
.landing-patient-grid .emr-col-program { width: 7%; }
.landing-patient-grid .emr-col-team { width: 5%; }
.landing-patient-grid .emr-col-fc { width: 4%; }
.landing-patient-grid .emr-col-favorite { width: 5%; }
}
/* Folded Tablet sub-band (`.landing-patient-grid--tablet`, PatientGrid.razor.cs FoldsColumns —
Sm only now, 600-959px). Bug 4281: this class used to apply across the whole LayoutContext.IsTablet
range (Sm/Md, 600-1279px before the Lg=1400 override; 600-1399px after), which made Md
(iPad-landscape, 960-1399px) fold columns it has plenty of room for. The grid now only adds this
class when FoldsColumns is true — Md instead falls through to the all-columns block above (its
media query starts at 960px), so this selector and that one's media query never both match the
same element and there is no specificity fight to reason about at Md.
Revised 2026-09-19: developer reported this grid still forced horizontal scrolling on iPad
portrait — Status Date and Team, kept as real columns below, added enough width that the row
overflowed even before the missing `table-layout: fixed` (just added) is accounted for. Legacy's
equivalent view at this width showed only Name/MRN/Status plus the favorite star; Status Date and
Team now fold into the same expandable child row LOC/Institution/Program/FC already use, leaving
six visible columns: expander, actions (offline-pin/UE), Name, MRN, Status, Favorite.
`table-layout: fixed; width: 100%;` was missing from this block entirely — every other grid's
`--tablet` selector (encounters, medications, allergies/hme, diagnoses/physicians/other-orders,
caregivers/staff) sets it unscoped, since the modifier class itself is what scopes "tablet" here,
not a media query. Without it the table used the browser's default auto layout, which sizes
columns from content and ignores the percentages below as hints only — that is what actually
produced the scrollbar/clipped-Favorites defect, independent of the column count.
Widths are the prior six-column shares proportionally redistributed to 100 after removing
Status Date (14%) and Team (8%) — old-share × (100 ÷ 78) — not a fresh on-device remeasurement;
revisit against a real iPad if Name or Status still feel tight. */
.landing-patient-grid--tablet .mud-table-root {
table-layout: fixed;
width: 100%;
}
.landing-patient-grid--tablet .emr-col-rowaction { width: 17%; }
.landing-patient-grid--tablet .emr-col-name { width: 38%; }
.landing-patient-grid--tablet .emr-col-mrn { width: 12%; }
.landing-patient-grid--tablet .emr-col-patient-status { width: 14%; }
.landing-patient-grid--tablet .emr-col-favorite { width: 9%; }
.landing-patient-grid--tablet .emr-col-expander { width: 10%; }
/* Phone (matches LayoutContext.IsPhone at Breakpoint.Xs) — the six wide columns are already
removed in markup; the four that remain must be free to shrink, or their desktop widths add up
past a phone viewport and the grid clips with HorizontalScrollbar="false". Pinned to phone only,
not widened to Tablet's 1279.98px: this is the phone-specific 4-column set, distinct from
Tablet's own 6-column set (.landing-patient-grid--tablet above) — widening would let this rule's
percentages collide with (and, by source order, override) the Tablet block at Tablet widths. */
@media (max-width: 599.98px) {
/* An auto-layout table grows to its content's min-width no matter what widths the columns ask
for, which pushed the expander past the viewport and produced a horizontal scroll. Fixed
layout makes the table honour its container; the columns below then divide that width. */
.landing-patient-grid .mud-table-root {
table-layout: fixed;
}
/* Percentages summing to 100, NOT px + auto. Under fixed layout an auto column only gets what
the fixed ones leave over, and the expanded child row is wide enough to take all of it — that
collapsed the Name column to zero width the moment a row was expanded. Percentages are
resolved from the table width alone, so expanding a row cannot resize the columns.
At 390px this is roughly 179 / 86 / 82 / 43 px; the last clears the 44px touch target. */
.landing-patient-grid .emr-col-name { width: 46%; min-width: 0; }
.landing-patient-grid .emr-col-mrn { width: 22%; }
.landing-patient-grid .emr-col-patient-status { width: 21%; }
.landing-patient-grid .emr-col-expander { width: 11%; }
}
/* Touch targets in grid rows. Grouped with the needs-grid rule in block 20, which sets the same
44px floor for the same reason. */
@media (pointer: coarse) {
.landing-patient-grid .mud-table-cell .mud-icon-button,
.emr-workitems-grid .mud-table-cell .mud-icon-button,
.emr-encounters-grid .mud-table-cell .mud-icon-button,
.emr-medications-grid .mud-table-cell .mud-icon-button,
.emr-allergies-grid .mud-table-cell .mud-icon-button,
.emr-hme-grid .mud-table-cell .mud-icon-button,
.emr-diagnoses-grid .mud-table-cell .mud-icon-button,
.emr-physicians-grid .mud-table-cell .mud-icon-button,
.emr-other-orders-grid .mud-table-cell .mud-icon-button,
.emr-caregivers-grid .mud-table-cell .mud-icon-button,
.emr-staff-grid .mud-table-cell .mud-icon-button {
min-width: 44px;
min-height: 44px;
}
}
/* HierarchyExpanderColumn's chevron toggle (2026-09-10 audit: sat flush against the row/panel edge
on narrower widths, e.g. WorkitemsGrid "All Tasks" on iPad portrait). TemplateColumn only exposes
HeaderClass -- not a body CellClass -- for this column, so .emr-col-expander reaches its | but
never its | ; :first-child is the only CSS-only hook available without touching
HierarchyExpanderColumn.razor. Same grid list as the touch-target rule above.
Grid Tiering Standard (responsive-grid-tiering, Phase 1/2): the chevron moved from trailing to
leading position in every one of these grids' declaration, so the flush edge it needs
room against is now the LEFT edge, not the right — this rule moved from :last-child/padding-right
to :first-child/padding-left with it. When the chevron column is Hidden (Desktop, or any tier
that folds nothing), :first-child falls through to whatever real data column now leads the row,
which already carried its own left padding from the per-grid tier blocks below — this rule simply
guarantees the 12px floor never regresses under it. 12px minimum edge padding, same universal
convention as the expansion-panel floor above; !important matches the specificity of each grid's
own base .mud-table-cell padding override it needs to beat. */
.landing-patient-grid .mud-table-cell:first-child,
.emr-workitems-grid .mud-table-cell:first-child,
.emr-encounters-grid .mud-table-cell:first-child,
.emr-medications-grid .mud-table-cell:first-child,
.emr-allergies-grid .mud-table-cell:first-child,
.emr-hme-grid .mud-table-cell:first-child,
.emr-diagnoses-grid .mud-table-cell:first-child,
.emr-physicians-grid .mud-table-cell:first-child,
.emr-other-orders-grid .mud-table-cell:first-child,
.emr-caregivers-grid .mud-table-cell:first-child,
.emr-staff-grid .mud-table-cell:first-child {
padding-left: 12px !important;
}
/* Every width, not just phone. Task and Patient render inside a MudButton, and MudBlazor buttons
are white-space:nowrap — a long name becomes one unbreakable box that stretches its column past
whatever percentage it was given and pushes the columns after it out of the viewport. Above
phone width there is no phone card to fall back on, .emr-patient-panel is overflow:hidden, and
HorizontalScrollbar is not used, so with nothing to scroll a tablet would simply clip. Wrapping
the link text to a second line inside the column it already has is what keeps the table narrow,
same fix PR 4814 hoisted out of the phone query for the landing patient grid. */
.emr-workitems-grid .emr-link.mud-button-root {
white-space: normal;
text-align: left;
}
/* Desktop only (>=1280px) — Tablet (600-1279px) gets its own column set below
(.emr-workitems-grid--tablet) instead. Same defect PR 4814 fixed for the landing patient grid: an auto-layout
table grows to its content's width, and with .emr-patient-panel overflow:hidden and no
horizontal scrollbar there is nothing to scroll, so a tablet clips the right-hand columns
outright instead of showing them. Fixed layout + percentages makes the table mathematically
unable to exceed its container: the columns shrink together and cells ellipsize
(.emr-workitems-grid .mud-table-cell above).
The expander column (HierarchyExpanderColumn, Hidden="@(!ShowExpander)") is absent at this width
too — wide desktop (Breakpoint.Lg+) is the one band where ShowExpander is false. Status is back as
its own sortable column (plan §B7 / audit §5) instead of folding into the Task cell's second line,
so the desktop set is now eight: Task, Patient, Status, Assigned To, Team, Due Date, Updated Date,
Updated By. Patient stays visible here even on Patient Tasks — HidePatientColumn is IsPhone &&
!ShowPatientLink, which is always false once IsPhone is false, so ShowPatientLink only ever hides
the column on phone.
Cell padding standardized to 16px horizontal (6px 8px), 12px on the first cell (plan §A2) — this
grid inherited MudBlazor's 40px dense padding with no override, which alone ate 280px of a ~890px
iPad row and is why columns wrapped "despite free space" (plan §A2/§A3). The last cell's 12px
padding-right comes from the shared .mud-table-cell:last-child rule above, not repeated here.
Widths below are `target px ÷ 1306px` (plan §A4 desktop reference; see OQ-2), not hand-tuned round
numbers — that derivation is itself the §3 fix. Status gets the widest content-driven share
(170px for "Pending Manual Workflow" / "Pending Signed Document", the longest real status labels,
plan §A3) with no max-width/ellipsis, reversing the two workarounds audit §5 rejected. Assigned To
and Team are the ADO-4158-era Assigned Employee / Assigned Team columns, renamed per plan §B2 (the
caption, not the value, drove their old widths). Widths sum to 100.
Task, Status and Due Date were re-measured after the exact-fit targets above visibly failed on a
real render: Status's chip text spilled past its own pill border and Due Date's "MM/dd/yyyy" value
clipped to "08/25…", both at their originally computed 14%/7% (zero margin over the 170px/89px
content targets — a chip border or a font-rendering rounding difference was enough to tip either
over). Task was also flagged as visibly over-wide at its original 29% (379px) against its actual
content need (~230px, including the inline Vx icon added after this plan). Task is trimmed to the
room it actually needs; the freed width goes to Status and Due Date as real margin, not another
exact fit — sized to survive rendering variance the plan's derivation could not. */
@media (min-width: 1280px) {
.emr-workitems-grid .mud-table-root {
table-layout: fixed;
}
.emr-workitems-grid .mud-table-cell {
padding: 6px 8px;
}
.emr-workitems-grid .mud-table-cell:first-child {
padding-left: 12px;
}
.emr-workitems-grid .emr-col-task { width: 20%; }
.emr-workitems-grid .emr-col-patient { width: 14%; }
.emr-workitems-grid .emr-col-status { width: 18%; }
.emr-workitems-grid .emr-col-employee { width: 12%; }
.emr-workitems-grid .emr-col-assignedteam { width: 7%; }
.emr-workitems-grid .emr-col-duedate { width: 9%; }
.emr-workitems-grid .emr-col-updated { width: 10%; }
.emr-workitems-grid .emr-col-updatedby { width: 10%; }
}
/* Tablet tier (Sm/Md, 600-1279px — LayoutContext.IsTablet) — ADO 4158 follow-up,
extended by plan §B2/§B4: Due Date no longer folds into the expander at this band (audit §2's
headline fix — it was hidden alongside Updated Date/Updated By with no documented rule), and
Status joins as a real column instead of the Task cell's second line (plan §B7). Assigned To and
Team still fold into the expandable child row phone already has — HierarchyExpanderColumn's
Hidden binds to !ShowExpander (IsPhone || IsTablet), so the chevron appears here too, for
Assigned To, Team, Updated Date, Updated By (count 4).
Five columns instead of eight, so this needs its own percentages, not the wide-desktop block
above — same selector shape and specificity, so source order is what makes this one win whenever
emr-workitems-grid--tablet is present. Widths are `target px ÷ 890px` (plan §A4 iPad
reference, measured on-device at a 1024px viewport) and sum to 100, including the expander.
.emr-col-expander is 9%, not the round 5% the leftover math would otherwise suggest: at the ~890px
iPad table area, 5% (~44px) exactly matches the chevron button's own 44px touch-target floor with
nothing left for the .mud-table-cell:last-child 12px padding-right rule above — the button
overflowed past the cell's right edge instead of leaving a gap (confirmed: measured a -15px
overlap on real iPad Pro dimensions). 9% (~80px) clears 44px button + 12px padding with a clean
~12px gap, confirmed on a real device — this overrides the shared 40px .emr-col-expander base
below for this grid/band only.
Task/Status/Due Date re-measured after a real render: the original 41/21/10 split (target px with
no margin) let Status's chip text spill past its pill border and clipped Due Date's value to
"08/25…", while Task sat visibly over-wide at 41% (365px) against its actual need (~230px with the
inline Vx icon). Same fix as the desktop block above — trim Task to its real requirement, give the
freed width to Status and Due Date as margin rather than another zero-tolerance exact fit. */
/* The percentages below are inert without this. `.emr-workitems-grid .mud-table-root` sets
width:100% unconditionally but declares table-layout:fixed only inside @media (min-width:1280px),
so at Tablet the table stays auto-layout and treats every percentage as a hint it may ignore —
the table then sizes from content and overflows the iPad-portrait table area. The landing patient
grid had the identical omission and produced a visible horizontal scrollbar on iPad portrait. */
.emr-workitems-grid--tablet .mud-table-root {
table-layout: fixed;
}
/* Due Date is 21%, not the 14% this block carried first. 14% was derived against a ~890px table
area (iPad Pro, 1024px viewport) where it yields ~125px — ample. The Tablet band starts at
600px, and on an iPad Mini in portrait the same 14% is roughly 90px against a date that needs
about 96px once the cell's own padding is counted, so "09/18/2026" clipped to "09/18/..." with
no way to read the rest: emr-col-nowrap stops it wrapping but cannot stop it clipping. Sized for
the NARROW end of the band rather than the reference device, since that is where it fails.
The 7 points come from Task, which had the most slack. */
.emr-workitems-grid--tablet .emr-col-task { width: 24%; }
.emr-workitems-grid--tablet .emr-col-patient { width: 19%; }
.emr-workitems-grid--tablet .emr-col-status { width: 27%; }
.emr-workitems-grid--tablet .emr-col-duedate { width: 21%; }
.emr-workitems-grid--tablet .emr-col-expander { width: 9%; }
/* iPad-portrait defect: "Pending Manual Workflow" spilled past its own pill border at the narrow
end of the Tablet range (iPad Mini/11" portrait) even with the 27% share above — the same
nowrap-plus-60px-floor failure mode already fixed for the encounters grid at
.emr-encounters-grid .emr-status-chip.mud-chip (app.components.css:1449-1453, phone tier).
Same fix, ported here: let the chip wrap and grow vertically instead of clipping. */
.emr-workitems-grid--tablet .emr-status-chip.mud-chip {
white-space: normal;
height: auto;
min-width: 0;
}
/* Phone row for the workitems grid (All Tasks + Patient Tasks). Same construction as the landing
patient grid above: Breakpoint.None keeps rows horizontal, up to five columns move to the child
row (neither Status nor Vx is one of them — ADO 4158 — both render inline under the task name),
and these percentages divide the remaining width. .emr-col-task / .emr-col-patient carry different
widths here than in the desktop block above — TemplateColumn does not support per-breakpoint
HeaderClass, so the media query is what makes the same class mean two different percentages.
Patient Tasks hides the patient column; under the fixed-table algorithm its 32% is redistributed
across the survivors in proportion to their widths, which widens both rather than only the
task column. Nothing clips either way.
Pinned to phone only, not widened to Tablet's 1279.98px: this is the phone-specific 3-column set
(task/patient/expander), distinct from Tablet's own 5-column set (.emr-workitems-grid--tablet
above) — widening would let this rule's percentages collide with (and, by source order, override)
the Tablet block at Tablet widths. */
@media (max-width: 599.98px) {
/* Fixed layout, and percentages rather than px: an auto-layout table grows to its content's
min-width and pushes the expander off screen, and under fixed layout a px/auto mix lets the
wide expanded child row starve the text columns to zero. */
.emr-workitems-grid .mud-table-root {
table-layout: fixed;
}
.emr-workitems-grid .emr-col-task { width: 57%; }
.emr-workitems-grid .emr-col-patient { width: 32%; }
.emr-workitems-grid .emr-col-expander { width: 11%; }
/* Patient Tasks (ShowPatientLink=false) hides the Patient column, and these widths MUST still
sum to 100 — they cannot be left to redistribute.
MudBlazor renders the hierarchy child row as | . A table's column count is
the max across its rows, so that one cell gives the table 1000 columns while the header
declares three. Under table-layout:fixed the three real columns take their declared widths
and every leftover percent is handed to the 997 phantom columns — so at 68% the collapsed
rows ended a third of the way short of the expanded card, which is exactly the "grid breaks
when I expand it" report. Re-proportioned to 100, there is no leftover to leak.
WorkitemsGridPhoneTests pins the colspan value this depends on. */
.emr-workitems-grid--no-patient .emr-col-task { width: 84%; }
.emr-workitems-grid--no-patient .emr-col-expander { width: 16%; }
}
/* Phone row for the patient encounter history grid. Breakpoint.None keeps rows horizontal and seven
columns move to the child row, leaving a two-column row: the type cell carries the encounter type
over the start timestamp, with status and the expander trailing.
Three text columns (type / start / status) was tried first and failed: each got too little width,
so the status chip clipped mid-word and the timestamp wrapped onto a third line while the short
type names left space unused. Folding start into the type cell gives both survivors real width. */
/* Every width, not just phone: the type is a link that can run long ("Comprehensive Assessment"),
and a link that will not wrap is one unbreakable box that stretches its column and pushes the
columns after it out of the viewport. Above phone width there is no phone card to fall back on and
.emr-patient-panel is overflow:hidden, so a tablet would clip rather than scroll. Same reason PR
4814 hoisted this out of the phone query for the landing patient and workitems grids. */
.emr-encounters-grid .emr-col-encounter-type .mud-link {
white-space: normal;
text-align: left;
}
/* Tablet tier (`.emr-encounters-grid--tablet`, LayoutContext.IsTablet — Sm/Md, 600-1279px). This
grid has the widest fold list in the app (9 real columns), so Tablet is deliberately generous:
identity (Name, Discipline), Type, the Orders/POC affordances, and Status all stay — only the
three timestamps (Start, End, Submit) fold, per the standard's "timestamps fold first" rule.
Fixed layout + percentages, same reasoning as the phone block below: engineering estimates, no
on-device iPad measurement pass for this grid. */
.emr-encounters-grid--tablet .mud-table-root {
table-layout: fixed;
width: 100%;
}
.emr-encounters-grid--tablet .emr-col-encounter-name { width: 16%; }
/* Discipline widened 12% -> 22%, taken from Type (30% -> 20%): at the 744px iPad Mini portrait
width, 12% (~89px) is narrower than "REGISTERED" — a single unbreakable token in the rendered
"(RN) / REGISTERED / NURSE" value — so it overflowed the cell to the right and painted over Type.
Type's value ("Focus Encounter") is space-delimited and wraps cleanly, so it can give up 10
points without clipping. Developer-directed split (do not re-litigate): widen Discipline, shrink
its font (see .emr-col-encounter-discipline font-size rule below) rather than truncate it —
text-overflow:ellipsis was explicitly rejected, since a clipped clinical discipline is worse
than a wrapped one. Sum unchanged at 100 (22 - 12 == 30 - 20). */
.emr-encounters-grid--tablet .emr-col-encounter-discipline { width: 22%; }
.emr-encounters-grid--tablet .emr-col-encounter-type { width: 20%; }
.emr-encounters-grid--tablet .emr-col-encounter-orders { width: 8%; }
.emr-encounters-grid--tablet .emr-col-encounter-poc { width: 8%; }
.emr-encounters-grid--tablet .emr-col-encounter-status { width: 16%; }
.emr-encounters-grid--tablet .emr-col-expander { width: 10%; }
/* De-emphasized cell text, house convention (.emr-field-value / .emr-issue-list-item / .emr-row-
caption above): caption-scale via the typography token, never a hardcoded px value. Scoped to
Tablet only — Desktop's wider Discipline column has no overflow problem and must not change.
The cell has no MudText wrapper to hang Typo="Typo.caption" on (plain interpolated text in the
CellTemplate), so CSS owns it directly; CellClass="emr-col-encounter-discipline" added
(EncountersListGrid.razor) alongside the existing HeaderClass so this reaches the | . td only:
the | carries the same class and must keep the grid's single header size. */
.emr-encounters-grid--tablet td.emr-col-encounter-discipline {
font-size: var(--mud-typography-caption-size);
}
/* Pinned to phone only, not widened to Tablet's 1279.98px: Tablet has its own column set now (the
modifier block above), which folds a narrower set (Start/End/Submit) than phone folds (Name/
Discipline/Start/End/Submit/Orders/POC) — the two bands cannot share one percentage table. */
@media (max-width: 599.98px) {
/* width:100% alongside table-layout:fixed — an auto-layout table only obeys the percentages
once it also fills its container, otherwise it shrinks to its content and they never engage. */
.emr-encounters-grid .mud-table-root {
table-layout: fixed;
width: 100%;
}
/* Degrade a long value to "…" rather than let it force its column wider. */
.emr-encounters-grid .mud-table-cell {
overflow: hidden;
text-overflow: ellipsis;
}
.emr-encounters-grid .emr-col-encounter-type { width: 54%; }
.emr-encounters-grid .emr-col-encounter-status { width: 31%; }
.emr-encounters-grid .emr-col-expander { width: 15%; }
/* MudChip is nowrap with a 60px floor (.emr-status-chip), so a status longer than its column
clips instead of wrapping — that is what cut "Completed" to "Comple". Letting it wrap and
grow vertically means no status can be truncated regardless of length. */
.emr-encounters-grid .emr-status-chip.mud-chip {
white-space: normal;
height: auto;
min-width: 0;
}
}
/* Tablet tier (`.emr-medications-grid--tablet`, LayoutContext.IsTablet — Sm/Md, 600-1399px, both
compact portrait ~810px and wide landscape): ADO 4135 follow-up — QA found Start Date,
Indications, and Relatedness folded behind the chevron on iPad landscape (1080 CSS px), leaving
only Medication/Directions/End Date visible. Developer decision: at the whole Tablet tier all
six columns render inline and the chevron is hidden (MedicationsListGrid.razor — every column's
Hidden now reads IsPhone only); ChildRowContent opens at phone only. Every declared column needs
an explicit HeaderClass under table-layout:fixed — MudBlazor renders the hierarchy child row as
| , and a table's column count is the max across its rows, so a column with no
declared width would have its share silently redivided across ~996 phantom columns the moment a
row expands elsewhere in the grid; not reachable here since the chevron is hidden, but kept
explicit for consistency with the other tiered grids.
ADO 4135 follow-up #2 (root cause of a still-horizontal-scrolling grid reported at 580-600 CSS
px): the phone block below matches on `.emr-medications-grid` alone, this block matches on
`.emr-medications-grid--tablet`, and both are two-class selectors, so they are EQUAL specificity.
`LayoutContext.IsTablet` (Sm/Md, JS ResizeObserver-driven) and the phone media query's
`max-width: 599.98px` (evaluated by the browser against the live CSS viewport) are two
INDEPENDENT measurements of the same boundary and are not guaranteed to agree to the pixel —
at a real narrow-Tablet width the grid can carry BOTH `emr-medications-grid--tablet` (from
LayoutContext) and be inside the sub-600px media query at the same time. When that happens the
phone rule wins on source order (it is declared later in the file) and silently overwrites two
of this block's six column widths with Phone's 4-column percentages — breaking the "sums to
100" invariant and overflowing the table. Verified with a static MudBlazor-CSS + rendered-markup
repro in Playwright: at 590px with only this stylesheet loaded, `.emr-col-medication` resolved
to Phone's 60% and `.emr-col-medication-end` to Phone's 25% instead of this block's 20%/12%,
confirmed via the browser's own matched-rule list. Fix: the phone rules now explicitly exclude
`.emr-medications-grid--tablet` (`:not(...)`) so they can never apply to a Tablet-classed grid
regardless of any px/JS timing mismatch — the two column sets are mutually exclusive by
selector, not just by the media query's nominal range.
Widths retuned for the reported failure width (580-600px, not just the ~700-1000px iPad range
this block originally targeted): Medication trimmed from 24% to 20% (its content — drug name +
dosage — tolerates two lines better than Directions/Indications losing more room), Start/End
raised from 11% to 15% and Indications/Relatedness from 11%/13% to 14% so a "MM/dd/yyyy" date
and a one-word header ("Indications", "Relatedness") both have a fighting chance at 600px, and
Directions absorbs the remainder (22%). Directions/Indications/Relatedness also drop to
caption-scale type at this tier (design.md typography table — `var(--mud-typography-caption-
size)`, the same token the encounters grid already uses for its Tablet Discipline column) to
give the narrow text columns more characters per line, and their DATA cells (not headers — see
below) gain `overflow-wrap: anywhere` so one unbroken clinical term (e.g. "Aggregation",
"HYPERACTIVITY") cannot force its column wider than its declared percentage. Even at caption
size, MudBlazor's fixed-width sort icon left no room for a whole header word on one line inside
a ~15%-wide column — the header's own flex row is allowed to wrap (see below) rather than widen
the column further, since a header only ever holds one short label while a data cell must hold
arbitrary clinical text. Start/End Date stay nowrap (.emr-col-nowrap) — at 600px, 15% is ~90px,
enough for "MM/dd/yyyy" with the tightened 4px date padding below — but nowrap is intentionally
NOT paired with overflow:hidden, so if a future narrower band still can't fit the date it wraps
to a second line instead of clipping or forcing the column wider. Engineering estimates
confirmed against a Playwright measurement of the actual rendered markup at 590/600/700/1000px,
with the app's real MudBlazor typography CSS variables (Typography.cs Caption=.75rem/
Subtitle2=.875rem) injected since a static repro has no MudThemeProvider to set them, in all
three grouping states (ungrouped, grouped-indications, grouped-relatedness) — revisit if a
column still clips or wraps awkwardly on a real device. */
.emr-medications-grid--tablet .mud-table-root {
table-layout: fixed;
width: 100%;
}
.emr-medications-grid--tablet .emr-col-medication { width: 20%; }
.emr-medications-grid--tablet .emr-col-medication-directions { width: 22%; }
.emr-medications-grid--tablet .emr-col-medication-start { width: 15%; }
.emr-medications-grid--tablet .emr-col-medication-end { width: 15%; }
.emr-medications-grid--tablet .emr-col-medication-indications { width: 14%; }
.emr-medications-grid--tablet .emr-col-medication-relatedness { width: 14%; }
/* ADO 4135 GroupBy follow-up: at Tablet the grouped column's data cell is hidden (the group
header row already carries the value — see MedicationsListGrid.razor), which would otherwise
leave a gap under table-layout:fixed. The freed width (14% either grouped column) is folded
into Directions, the column with the most benefit from extra room; the remaining five visible
columns' widths still sum to 100%. */
.emr-medications-grid--tablet.emr-medications-grid--grouped-indications .emr-col-medication-directions,
.emr-medications-grid--tablet.emr-medications-grid--grouped-relatedness .emr-col-medication-directions {
width: 36%;
}
/* ADO 4305: Active mode hides the End Date column, which under table-layout:fixed would leave its
15% as dead space on the right. Its share is handed back so the visible columns sum to 100%. */
.emr-medications-grid--tablet.emr-medications-grid--active .emr-col-medication { width: 24%; }
.emr-medications-grid--tablet.emr-medications-grid--active .emr-col-medication-directions { width: 26%; }
.emr-medications-grid--tablet.emr-medications-grid--active .emr-col-medication-start { width: 16%; }
.emr-medications-grid--tablet.emr-medications-grid--active .emr-col-medication-indications { width: 17%; }
.emr-medications-grid--tablet.emr-medications-grid--active .emr-col-medication-relatedness { width: 17%; }
.emr-medications-grid--tablet.emr-medications-grid--active.emr-medications-grid--grouped-indications .emr-col-medication-directions,
.emr-medications-grid--tablet.emr-medications-grid--active.emr-medications-grid--grouped-relatedness .emr-col-medication-directions {
width: 43%;
}
/* Specificity note: MudBlazor's dense padding is `.mud-table-dense * .mud-table-row .mud-table-cell`
(0,3,0) — matched here by chaining grid/cell/nowrap classes so this rule wins on source order,
same pattern already used for the needs grid above. Applies to the nowrap date cells and to
every cell (header and data) of the four narrow 14-15% columns; Medication and Directions keep
the default dense padding. Headers are included because, for a 70-80px-wide header:
MudBlazor's sort-icon button (`.mud-icon-button`, ~26px) sits in a `display:flex; flex-wrap:
nowrap` header row alongside the title text, and the header's DEFAULT (un-tightened) padding
left the flex row only ~30px to fit both, so "Start Date"/"Indications"/"Relatedness" scrolled
past their own cell even though the data-row date text below was already correctly tightened. */
.emr-medications-grid--tablet .mud-table-row .mud-table-cell.emr-col-nowrap,
.emr-medications-grid--tablet .mud-table-cell.emr-col-medication-start,
.emr-medications-grid--tablet .mud-table-cell.emr-col-medication-end,
.emr-medications-grid--tablet .mud-table-cell.emr-col-medication-indications,
.emr-medications-grid--tablet .mud-table-cell.emr-col-medication-relatedness {
padding-left: 4px;
padding-right: 4px;
}
/* Caption-scale type for the long-text data cells (house convention — see the identical pattern
for .emr-encounters-grid--tablet .emr-col-encounter-discipline above). td only: the | carries
the same class through HeaderClass, and every header keeps the grid's single header size. */
.emr-medications-grid--tablet td.emr-col-medication-directions,
.emr-medications-grid--tablet td.emr-col-medication-indications,
.emr-medications-grid--tablet td.emr-col-medication-relatedness {
font-size: var(--mud-typography-caption-size);
}
/* MudBlazor's header lays the title text and its sort-icon button out as `display:flex;
flex-wrap: nowrap` (Styles/components/_table.scss). That single icon is a fixed ~26px the
narrow 14%-width tablet columns cannot spare alongside a whole word ("Indications",
"Relatedness") on one line — confirmed in the Playwright repro: even after the caption-size
font-size above, the header's own scrollWidth still exceeded its column. Letting the flex row
wrap (icon drops under the title instead of beside it) uses the column's existing height instead
of forcing width, matching this tier's already-documented allowance for two-line headers. */
.emr-medications-grid--tablet th.emr-col-medication-start .column-header,
.emr-medications-grid--tablet th.emr-col-medication-end .column-header,
.emr-medications-grid--tablet th.emr-col-medication-indications .column-header,
.emr-medications-grid--tablet th.emr-col-medication-relatedness .column-header {
flex-wrap: wrap;
}
/* overflow-wrap:anywhere only on the DATA cell (td), never the header (th): a header carries the
same HeaderClass/CellClass pair as its column's | (Grid Tiering Standard), and "anywhere"
applied to a one-word header ("Indications", "Relatedness") breaks it mid-word into a vertical
stack of single letters the moment the header's own text is tight against MudBlazor's sort-icon
flex row — confirmed visually in the Playwright repro. Data rows carry real clinical terms that
can be much longer than any header ("Platelet Aggregation Inhibitor"), so they still need it. */
.emr-medications-grid--tablet td.emr-col-medication-indications,
.emr-medications-grid--tablet td.emr-col-medication-relatedness,
.emr-medications-grid--tablet td.emr-col-medication-directions {
overflow-wrap: anywhere;
}
/* Phone row for the patient medications grid. Same shape as the encounter history grid above: the
medication cell carries the drug name over its directions, with the end date and the expander
trailing. Directions is the longest field in the row and the one worth reading beside a drug
name, so it rides in the primary cell rather than taking a column that would starve the rest.
Pinned to phone only, not widened to Tablet's 1279.98px: Tablet has its own column set now (the
modifier block above), which folds a different, narrower set of columns than phone (Start Date/
Indications/Relatedness vs. phone's Directions/Start Date/Indications/Relatedness) — the two
bands cannot share one percentage table. `:not(.emr-medications-grid--tablet)` on the two rules
that collide by class name (`.emr-col-medication`, `.emr-col-medication-end`) makes that
separation structural instead of relying on the media query's nominal range never overlapping
LayoutContext.IsTablet in practice — see the root-cause note on the Tablet block above. */
@media (max-width: 599.98px) {
/* width:100% alongside table-layout:fixed — an auto-layout table only obeys the percentages
once it also fills its container, otherwise it shrinks to its content and they never engage. */
.emr-medications-grid .mud-table-root {
table-layout: fixed;
width: 100%;
}
.emr-medications-grid:not(.emr-medications-grid--tablet) .emr-col-medication { width: 60%; }
.emr-medications-grid:not(.emr-medications-grid--tablet) .emr-col-medication-end { width: 25%; }
.emr-medications-grid .emr-col-expander { width: 15%; }
.emr-medications-grid--active:not(.emr-medications-grid--tablet) .emr-col-medication { width: 85%; }
/* Two lines, then ellipsis. A full sig ("Take 1 tablet by mouth twice daily as needed for
pain, do not exceed 4 doses in 24 hours") would otherwise make a single row taller than the
viewport and defeat the point of collapsing the grid. The untruncated text is in the card.
-webkit- prefixed line-clamp is the only cross-browser form; display:-webkit-box is required
with it, and overflow:hidden is what actually clips. */
.emr-medications-grid .emr-medication-phone-directions {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
/* HME desktop column widths, moved verbatim off per-column HeaderStyle= (forbidden for sizing —
inline style in disguise). Unprefixed by a media query so they remain the desktop widths; the
phone block below overrides the two columns that survive there. Sums to 97%, as the inline
values did — the remainder falls to the unsized expander column, absent above 960px. */
.emr-col-hme-type { width: 9%; }
.emr-col-hme-name { width: 22%; }
.emr-col-hme-qty { width: 5%; }
.emr-col-hme-instructions { width: 28%; }
.emr-col-hme-relatedness { width: 15%; }
.emr-col-hme-startdate { width: 9%; }
.emr-col-hme-enddate { width: 9%; }
/* Tablet tier for the allergies and HME grids (`--tablet` modifier, LayoutContext.IsTablet —
Sm/Md, 600-1279px). Allergen/Reaction and Type/Name/Instructions are the identity + primary
content that stay; Allergies also keeps Status and the edit/delete Actions (row affordances
outrank the classifier/timestamp/free-text fields that fold). Fixed layout + percentages, same
reasoning as the phone block below: engineering estimates, no on-device iPad measurement pass
for these two grids. */
.emr-allergies-grid--tablet .mud-table-root,
.emr-hme-grid--tablet .mud-table-root {
table-layout: fixed;
width: 100%;
}
.emr-allergies-grid--tablet .emr-col-allergen { width: 30%; }
.emr-allergies-grid--tablet .emr-col-allergy-reaction { width: 25%; }
.emr-allergies-grid--tablet .emr-col-allergy-status { width: 15%; }
.emr-allergies-grid--tablet .emr-col-allergy-actions { width: 15%; }
.emr-allergies-grid--tablet .emr-col-expander { width: 15%; }
.emr-hme-grid--tablet .emr-col-hme-type { width: 12%; }
.emr-hme-grid--tablet .emr-col-hme-name { width: 28%; }
.emr-hme-grid--tablet .emr-col-hme-qty { width: 8%; }
.emr-hme-grid--tablet .emr-col-hme-instructions { width: 37%; }
.emr-hme-grid--tablet .emr-col-expander { width: 15%; }
/* Phone rows for the allergies and HME grids. Same shape as the encounter and medication grids
above: the primary cell carries the identifier over its one paired free-text field, with a short
categorical column and the expander trailing. Allergen/Reaction and Name/Instructions are the
pairs you scan these lists by; giving each half its own narrow column starves both.
Pinned to phone only, not widened to Tablet's 1279.98px: Tablet has its own column set now (the
modifier blocks above), which folds a narrower set than phone folds — the two bands cannot share
one percentage table. */
@media (max-width: 599.98px) {
/* width:100% alongside table-layout:fixed — an auto-layout table only obeys the percentages
once it also fills its container, otherwise it shrinks to its content and they never engage. */
.emr-allergies-grid .mud-table-root,
.emr-hme-grid .mud-table-root {
table-layout: fixed;
width: 100%;
}
/* Edit/delete were tried inline and reverted: two 44px touch targets plus the expander needed
~43% of the row, leaving Allergen 38%, which crowded the name and its reaction caption. With
the actions in the card, Allergen keeps 60% and the row stays legible. */
.emr-allergies-grid .emr-col-allergen { width: 60%; }
.emr-allergies-grid .emr-col-allergy-status { width: 25%; }
.emr-allergies-grid .emr-col-expander { width: 15%; }
.emr-hme-grid .emr-col-hme-name { width: 60%; }
.emr-hme-grid .emr-col-hme-type { width: 25%; }
.emr-hme-grid .emr-col-expander { width: 15%; }
/* The item name is a MudLink and will not wrap on its own; a long name would otherwise be one
unbreakable box that stretches its column and pushes the expander off screen. */
.emr-hme-grid .emr-col-hme-name .mud-link {
white-space: normal;
text-align: left;
}
/* Two lines, then ellipsis — a long instruction would otherwise make one row taller than the
viewport and defeat the point of collapsing the grid. Full text is in the card. -webkit-
prefixed line-clamp is the only cross-browser form; display:-webkit-box is required with it,
and overflow:hidden is what actually clips. */
.emr-hme-grid .emr-hme-phone-instructions {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
/* Diagnosis code: nowrap + monospace, moved off a per-column CellStyle (forbidden for sizing and
alignment). Applies at every width — it is the code's typography, not a phone rule — and is
reused by the phone secondary line under the diagnosis name. */
.emr-col-diagnosis-code {
white-space: nowrap;
font-family: monospace;
}
/* The secondary line under a primary value in a phone grid row (start date under an encounter type,
reaction under an allergen, code under a diagnosis, category under an order comment).
display:block is the whole point: MudText renders Typo.caption as a , so without this the
caption flows inline and the value runs straight onto the end of the name with no separator —
"Cerebral atherosclerosisI67.2". The medications and HME sublines escape it only because their
two-line clamp sets display:-webkit-box, which is already block-level. Only ever rendered inside
an @if (IsPhone), so it needs no media query. */
.emr-grid-subline {
display: block;
}
/* Tablet tier for the diagnoses, physicians and other-orders grids (`--tablet` modifier,
LayoutContext.IsTablet — Sm/Md, 600-1279px). All three fold only Start Date (a timestamp) at
this tier — everything else that fits at Phone width fits comfortably wider at Tablet, so only
the one field the standard calls out to fold first actually folds. Fixed layout + percentages
for the same reason as the phone block below: engineering estimates, no on-device iPad
measurement pass for these three grids. */
.emr-diagnoses-grid--tablet .mud-table-root,
.emr-physicians-grid--tablet .mud-table-root,
.emr-other-orders-grid--tablet .mud-table-root {
table-layout: fixed;
width: 100%;
}
.emr-diagnoses-grid--tablet .emr-col-diagnosis-codehdr { width: 15%; }
.emr-diagnoses-grid--tablet .emr-col-diagnosis { width: 45%; }
.emr-diagnoses-grid--tablet .emr-col-diagnosis-enddate { width: 20%; }
.emr-diagnoses-grid--tablet .emr-col-expander { width: 10%; }
/* Relatedness previously had no dedicated HeaderClass and took the 10% these four left over —
the same phantom-column defect as Medications' Directions above: MudBlazor's |
hierarchy child row hands every unclaimed percent to ~996 phantom columns instead of the one
real column that was relying on leftover allocation, collapsing it to min-content on expand.
Relatedness now carries HeaderClass="emr-col-diagnosis-relatedness" (DiagnosesListGrid.razor)
so its 10% share is explicit; the value itself is unchanged. */
.emr-diagnoses-grid--tablet .emr-col-diagnosis-relatedness { width: 10%; }
.emr-physicians-grid--tablet .emr-col-physician-name { width: 35%; }
.emr-physicians-grid--tablet .emr-col-physician-role { width: 20%; }
.emr-physicians-grid--tablet .emr-col-physician-enddate { width: 15%; }
.emr-physicians-grid--tablet .emr-col-expander { width: 10%; }
/* Preferences previously had no dedicated HeaderClass and took the 20% these four left over —
same phantom-column defect as above. Preferences now carries
HeaderClass="emr-col-physician-preferences" (PhysiciansListGrid.razor) so its 20% share is
explicit; the value itself is unchanged. */
.emr-physicians-grid--tablet .emr-col-physician-preferences { width: 20%; }
.emr-other-orders-grid--tablet .emr-col-otherorder-comment { width: 40%; }
.emr-other-orders-grid--tablet .emr-col-otherorder-category { width: 15%; }
.emr-other-orders-grid--tablet .emr-col-otherorder-coverage { width: 15%; }
.emr-other-orders-grid--tablet .emr-col-otherorder-enddate { width: 20%; }
.emr-other-orders-grid--tablet .emr-col-expander { width: 10%; }
/* ADO 4305: Active mode hides End Date; its share goes to the widest column so widths sum to 100%. */
.emr-diagnoses-grid--tablet.emr-diagnoses-grid--active .emr-col-diagnosis { width: 65%; }
.emr-physicians-grid--tablet.emr-physicians-grid--active .emr-col-physician-name { width: 50%; }
.emr-other-orders-grid--tablet.emr-other-orders-grid--active .emr-col-otherorder-comment { width: 60%; }
/* Phone rows for the diagnoses, physicians and other-orders grids. All three are date-bounded
records with short qualifiers, so all three take the same shape as the grids above: identifier
(plus, for physicians, Role — ADO 4134, distinguishes a contact appearing in multiple roles) in
the leading cells, End Date trailing, everything else in the card. End Date rather than Start
Date is inline because whether a record is still current is what you scan for; the row-level
expiry styling that would otherwise carry it is dead (.v-c-error is applied by six grids and
defined by none).
Pinned to phone only, not widened to Tablet's 1279.98px: Tablet has its own column set now (the
modifier blocks above), which folds a narrower set (Start Date only) than phone folds — the two
bands cannot share one percentage table. */
@media (max-width: 599.98px) {
/* width:100% alongside table-layout:fixed — an auto-layout table only obeys the percentages
once it also fills its container, otherwise it shrinks to its content and they never engage. */
.emr-diagnoses-grid .mud-table-root,
.emr-physicians-grid .mud-table-root,
.emr-other-orders-grid .mud-table-root {
table-layout: fixed;
width: 100%;
}
.emr-diagnoses-grid .emr-col-diagnosis { width: 60%; }
.emr-diagnoses-grid .emr-col-diagnosis-enddate { width: 25%; }
.emr-diagnoses-grid .emr-col-expander { width: 15%; }
.emr-physicians-grid .emr-col-physician-name { width: 40%; }
.emr-physicians-grid .emr-col-physician-role { width: 25%; }
.emr-physicians-grid .emr-col-physician-enddate { width: 20%; }
.emr-physicians-grid .emr-col-expander { width: 15%; }
.emr-other-orders-grid .emr-col-otherorder-comment { width: 60%; }
.emr-other-orders-grid .emr-col-otherorder-enddate { width: 25%; }
.emr-other-orders-grid .emr-col-expander { width: 15%; }
.emr-diagnoses-grid--active .emr-col-diagnosis { width: 85%; }
.emr-physicians-grid--active .emr-col-physician-name { width: 60%; }
.emr-other-orders-grid--active .emr-col-otherorder-comment { width: 85%; }
/* Two lines, then ellipsis. An order comment is free text with no length limit and would
otherwise make one row taller than the viewport. Full text is in the card. -webkit- prefixed
line-clamp is the only cross-browser form; display:-webkit-box is required with it, and
overflow:hidden is what actually clips. */
.emr-other-orders-grid .emr-otherorder-phone-comment {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
/* Tablet tier for the caregivers and staff-assignment grids (`--tablet` modifier,
LayoutContext.IsTablet — Sm/Md, 600-1279px). Both are people lists: identity (First/Last Name or
Kind+Name) and contact info (Phone, or Cellular+Business) stay, plus caregivers' edit Action —
only the classifiers (Relation/Legal Relationship, or Prof Discipline/Type) fold, per the
standard's "identity/status/affordances stay, classifiers fold" ordering. Fixed layout +
percentages, same reasoning as the phone block below: engineering estimates, no on-device iPad
measurement pass for these two grids. */
.emr-caregivers-grid--tablet .mud-table-root,
.emr-staff-grid--tablet .mud-table-root {
table-layout: fixed;
width: 100%;
}
.emr-caregivers-grid--tablet .emr-col-caregiver-firstname { width: 18%; }
.emr-caregivers-grid--tablet .emr-col-caregiver-lastname { width: 18%; }
.emr-caregivers-grid--tablet .emr-col-caregiver-phone { width: 22%; }
.emr-caregivers-grid--tablet .emr-col-caregiver-type { width: 15%; }
.emr-caregivers-grid--tablet .emr-col-caregiver-actions { width: 12%; }
.emr-caregivers-grid--tablet .emr-col-expander { width: 15%; }
.emr-staff-grid--tablet .emr-col-staff-kind { width: 8%; }
/* Name gives up 3 points and Expander 5 (both go to Cellular/Business below) — Expander is the
more generous donor: at 15% (~112px on the 744px iPad Mini portrait reference) it is nearly
triple the ~44px+12px-padding floor the chevron actually needs (same floor already measured for
.emr-workitems-grid--tablet .emr-col-expander above), so trimming it to 10% (~74px) still clears
that floor with margin. Sum unchanged at 100. */
.emr-staff-grid--tablet .emr-col-staff-name { width: 24%; }
.emr-staff-grid--tablet .emr-col-staff-role { width: 20%; }
/* Cellular/Business widened 15% -> 19% each: a phone number is one atomic value ("(933) 003-8920"),
and browsers break at the hyphen, so at 15% (~112px) it fragmented across two or three lines —
"(933)" / "003-" / "8920" — a misreading risk in a clinical context. white-space:nowrap below
stops the fragmentation outright; 19% (~141px) is the room freed from Name/Expander to hold the
now-unbreakable value with margin. */
.emr-staff-grid--tablet .emr-col-staff-cellular { width: 19%; }
.emr-staff-grid--tablet .emr-col-staff-business { width: 19%; }
.emr-staff-grid--tablet .emr-col-expander { width: 10%; }
/* CellClass="emr-col-staff-cellular"/"emr-col-staff-business" added alongside the existing
HeaderClass (StaffAssignmentsListGrid.razor) so this reaches the | — PatientPhoneLink renders
a plain div/MudLink with no class of its own to hang white-space on, and white-space is
inherited, so setting it here on the cell reaches the link text inside. Scoped to Tablet only:
Desktop has no declared width for these columns (auto layout sizes to content, so nothing
fragments there) and must not change. */
.emr-staff-grid--tablet .mud-table-cell.emr-col-staff-cellular,
.emr-staff-grid--tablet .mud-table-cell.emr-col-staff-business {
white-space: nowrap;
}
/* The single-character E/V chip (StaffAssignmentsListGrid.razor ~:115) hit the same MudChip 60px
min-width floor already fixed twice elsewhere in this file (.emr-status-chip.mud-chip above) —
at 8% (~60px on the 744px iPad Mini portrait reference) the chip's own 60px floor left it with no
margin, so the glyph was visibly mangled. Unlike the status chips, there is nothing here to
wrap — a single character never needs white-space:normal/height:auto — so min-width:0 alone (plus
flex-shrink:0 so the cell's flex layout cannot compress it back out of round) is the narrower,
correct fix; widening emr-col-staff-kind was deliberately not spent on this. Scoped to Tablet:
Desktop's "" column has no declared width and the chip is not crushed there. */
.emr-staff-grid--tablet .emr-staff-kind-chip.mud-chip {
min-width: 0;
flex-shrink: 0;
}
/* Phone rows for the caregivers and staff-assignment grids. Both are people lists, so the primary
cell carries the name; caregivers put the single primary phone underneath (a caregiver list on a
phone exists to be called from) while staff put the primary role, because with both a cellular
and a business number present, picking one for the row would be arbitrary — both stay tap-to-call
in the card instead. Staff keeps its one-character E/V chip inline: it encodes employee-vs-
volunteer and active-vs-inactive in 15%, which is the cheapest signal in either grid.
Pinned to phone only, not widened to Tablet's 1279.98px: Tablet has its own column set now (the
modifier blocks above), which folds a narrower set than phone folds — the two bands cannot share
one percentage table. */
@media (max-width: 599.98px) {
/* width:100% alongside table-layout:fixed — an auto-layout table only obeys the percentages
once it also fills its container, otherwise it shrinks to its content and they never engage. */
.emr-caregivers-grid .mud-table-root,
.emr-staff-grid .mud-table-root {
table-layout: fixed;
width: 100%;
}
.emr-caregivers-grid .emr-col-caregiver-name { width: 60%; }
.emr-caregivers-grid .emr-col-caregiver-type { width: 25%; }
.emr-caregivers-grid .emr-col-expander { width: 15%; }
.emr-staff-grid .emr-col-staff-kind { width: 15%; }
.emr-staff-grid .emr-col-staff-name { width: 70%; }
.emr-staff-grid .emr-col-expander { width: 15%; }
}
/* Tablet tier (`.emr-documents-grid--tablet` / `.emr-encounter-documents-grid--tablet`,
LayoutContext.IsTablet — Sm/Md, 600-1279px). Both grids share this identical shape: a hidden
grouping column plus Category, File Name, and Date. The developer chose sizing over folding here
— no HierarchyExpanderColumn, no child row, nothing hidden — so Grid Tiering Standard's "tier
down, don't squeeze" is deliberately not applied to this pair. Without `table-layout: fixed` the
table sized itself from content instead of the container, so a long file name pushed the table
past its panel and Date was clipped off the right edge (commit a7a58e74 turned that clip into a
horizontal scrollbar instead of fixing it). Percentages sized for the 744px narrow end of the
Tablet band (iPad Mini portrait), not an iPad Pro. */
.emr-documents-grid--tablet .mud-table-root,
.emr-encounter-documents-grid--tablet .mud-table-root {
table-layout: fixed;
width: 100%;
}
.emr-documents-grid--tablet .emr-col-doc-category,
.emr-encounter-documents-grid--tablet .emr-col-doc-category {
width: 25%;
}
/* A patient document's file name is often one long dot-delimited token with no spaces
("word.word.date.number.number.s.2.pdf") — browsers only break lines at spaces, so that token's
min-content width is the full string. Under table-layout:fixed that no longer widens the table,
but without a break rule it still overflows this column's own 55% and spills across Date.
overflow-wrap: anywhere breaks it mid-string, same technique as the qualifier-chip and
.emr-needs-col-label wide-text cells elsewhere in this file. */
.emr-documents-grid--tablet .emr-col-doc-filename,
.emr-encounter-documents-grid--tablet .emr-col-doc-filename {
width: 55%;
overflow-wrap: anywhere;
}
.emr-documents-grid--tablet .emr-doc-action-col,
.emr-encounter-documents-grid--tablet .emr-doc-action-col {
width: 20%;
}
/* Uniform width so single-word and multi-word status labels align across the grid; grouped
(D10) with .emr-needs-level-chip in the Needs Selection dialog block, which points back here. */
.emr-status-chip.mud-chip,
.emr-needs-level-chip.mud-chip {
min-width: 60px;
justify-content: center;
}
/* Entries tab Status chip — legacy Style="min-width: 80px;" (IntervalChartHome.razor). Wider than
the shared 60px .emr-status-chip floor above, so this stacks on top rather than editing it —
other components rely on the 60px width. */
.emr-status-chip-wide.mud-chip {
min-width: 80px;
}
/* ADO 4158: status renders as plain colored text under the task name (Vx alongside it), not a chip
in its own column — the Task cell is percentage-wide, not a fixed 180px, so on most viewports
there is room for the full label without the chip's border/background chrome. Truncation is a
floor for the narrow end of the Task cell's range (small phones, or a shrunk desktop window):
workitem status_name runs up to 24 chars ("Pending Signed Document"), and unlike MudChip this
plain text does wrap on its own without display:inline-block + a definite max-width. 150px
comfortably fits every status_name in the current lookup except the two 24-char ones (Pending
Manual Workflow / Pending Signed Document), which are meant to truncate — in the grid only; the
Task Details dialog reuses "emr-status-chip" on its own full-width row and must show the name
uncut, which is why this rule is scoped to the grid rather than a bare status class. */
.emr-workitems-grid .emr-status-text {
display: inline-block;
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
}
/* MudBlazor chip colors are set via internal palette vars; !important is a scoped legacy-fidelity override for statuses that have no matching semantic token. */
.emr-chip-discharge.mud-chip {
background-color: var(--emr-status-discharge) !important;
color: var(--mud-palette-white) !important;
}
/* QualifierBlockView / FlagRowsBlockView / Impact placeholder text — MudTextField-style
hint shown only while empty; not interactive, matches other muted placeholder text. */
.qualifier-placeholder-text {
color: var(--mud-palette-text-secondary);
font-style: italic;
}
/* ADO 4203: a REQTEXT qualifier value ("Other – ") overran the field bounds
when the symptom was viewed in the encounter — MudChip is single-line by design (fixed
height, nowrap). Scoped to the QualifierBlockView (Time / Effect / Quality, wound location)
and FlagRowsBlockView (Palliation / Provocation) chips: let the chip grow vertically and
wrap its text inside the field's width. overflow-wrap:anywhere covers a 200-character
unbroken string, which normal word wrapping would still overrun. */
.qualifier-block .mud-chip,
.flag-rows-block .mud-chip {
height: auto;
min-height: 24px; /* MudChip Size.Small height — single-line chips render unchanged */
max-width: 100%;
white-space: normal;
}
.qualifier-block .mud-chip .mud-chip-content,
.flag-rows-block .mud-chip .mud-chip-content {
white-space: normal;
overflow-wrap: anywhere;
line-height: 1.3;
padding-top: 2px;
padding-bottom: 2px;
}
.emr-grid-actions {
text-align: right;
white-space: nowrap;
padding-right: 8px !important;
}
.emr-grid-actions .emr-action-edit {
color: var(--mud-palette-text-secondary);
}
.emr-grid-actions .emr-action-delete {
color: var(--mud-palette-error);
}
.emr-pending-encounter-type-col {
width: 320px;
}
.emr-pending-encounter-updated-col {
width: 200px;
}
/* min-width, not width: the actions row wraps (see PendingEncounterGrid.razor) so it
no longer needs to fit 3 buttons on one line — a fixed 300px used to force the
buttons themselves to flex-shrink below their label width, clipping button text. */
.emr-pending-encounter-action-col {
min-width: 220px;
}
/* Buttons/badge must never compress below their content on the line they land on —
the optional not-validated caption renders on its own line below them and wraps there. */
.emr-pending-encounter-action-col .mud-button-root,
.emr-pending-encounter-action-col .mud-badge-root {
flex-shrink: 0;
}
/* Safety net, not the primary fix: the action row wraps before this is needed, but an
explicit scroll (vs. clipping) is required if content ever still exceeds the column. */
.emr-pending-encounter-grid .mud-table-container {
overflow-x: auto;
}
/* Patient summary inner tables (Diagnoses / Allergies / Medications) sit inside
the mini-case dialog tabs and inside the landing drawer. They must fill their
container and clip horizontal overflow so column-width settings stay honoured
regardless of host width. */
.emr-summary-table {
width: 100%;
overflow-x: hidden;
}
/* Interval Chart tab content (IntervalChartPage) — ports legacy IntervalChartHome.razor's
.ic-scroll/.ic-sticky-thead/.mi-table trio, renamed to our emr- prefix and re-targeted at
MudDataGrid's real DOM: MudDataGrid renders a inside .mud-table-container, the same
class MudTable used (confirmed via bUnit render; .emr-impersonation-saved-grid above already
relies on this same class). Left alone, .mud-table-container's own overflow-y:auto
(MudBlazor.min.css) traps scroll inside each grid and truncates rows below the fold long before
the page itself needs to scroll — legacy's own documented bug, and the "content must not be
truncated" complaint this whole block exists to fix: the truncation is missing ROWS scrolled out
of view, not clipped characters.
Applied ONCE, at the tab-panel level (MudTabs' TabPanelsClass on IntervalChartPage.razor) rather
than per-tab, so it becomes the ONE scrollable region for whichever of the five tabs (Shifts,
Shift POC, Vitals, MARs, Entries) is active at a time — MudTabs does not keep inactive panels in
the DOM, so .mud-tabs-panels only ever wraps the current tab's content. */
.emr-ic-scroll {
overflow: auto;
-webkit-overflow-scrolling: touch;
/* Fixed height (not max-height) so the container fills the page down to the bottom instead of
shrinking to its rows — it still scrolls internally when content is taller, the same
fixed-vs-max-height choice legacy's own comment makes.
--emr-ic-scroll-offset (320px) is this page's current header stack: app bar, main-content
padding, heading row, toolbar, paginator, tab strip. It is a measurement, not a contract —
override the custom property rather than editing this rule when the stack changes or another
page reuses .emr-ic-scroll. Legacy's own value was 280px; our app bar alone is 76px. */
height: calc(100dvh - var(--emr-ic-scroll-offset, 320px) - var(--emr-ic-scroll-extra, 0px));
padding-bottom: 1.5rem;
box-sizing: border-box;
}
/* Neutralizes MudDataGrid's own internal scroll so .emr-ic-scroll is the only scrollbar — left
active, the grid's own max-height:100%/overflow-y:auto would either re-truncate its rows inside
the fixed-height panel (the exact bug this block exists to avoid) or, once it also grew past its
own limit, hand the page two nested scrollbars instead of one.
No !important: MudBlazor's plain rule is a single class (.mud-table-container, specificity
0-1-0); the sticky-header/footer variant is 0-2-0 (.mud-table-sticky-header .mud-table-container)
but none of the five Interval Chart grids set FixedHeader/FixedFooter, so it never applies here.
Either way this two-class selector already wins on specificity, and app.components.css loads
after MudBlazor.min.css, so source order would break the tie even if it were equal. */
.emr-ic-scroll .mud-table-container {
overflow: visible;
max-height: none;
}
/* Sticky column headers — legacy's .ic-sticky-thead, which legacy applied to one table only (the
Entries MudSimpleTable), never page-wide. Kept opt-in here for the same reason: unlike
.emr-ic-scroll above (applied once, at the tab-panel level, for every tab), a page-wide sticky
rule breaks the Shift POC tab, which renders two MudDataGrids per care plan inside expansion
panels that are all open by default — each grid's own thead sticks to the shared scroll
container's top and is then pushed off by the next grid's thead, stacking into a cascading
multi-header effect instead of one clean sticky header. .emr-ic-sticky-thead is applied only to
the Entries grid (EntriesTab.razor), the one tab where a single always-visible header earns its
keep. position:sticky still anchors to the nearest scrolling ancestor, which is .emr-ic-scroll
itself now that the grid's own container no longer scrolls (the rule above) — hence the
.emr-ic-scroll ancestor in this selector, matching where the sticky positioning actually resolves. */
.emr-ic-scroll .emr-ic-sticky-thead thead th {
position: sticky;
top: 0;
z-index: 2;
background: var(--mud-palette-surface);
box-shadow: inset 0 -1px 0 var(--emr-hairline);
}
/* Fixed table layout — legacy's .mi-table. Scoped to the Entries grid, the only one of the five
tabs that declares per-column widths: under fixed layout a grid with no declared widths sizes
its columns off the first row alone, so the other four keep auto layout. Here it makes the
.emr-col-entries-* widths authoritative instead of hints, so a long value wraps onto a second
line inside its own column rather than the browser silently growing the column past it — the
horizontal counterpart to .emr-patient-panel's overflow:hidden, which would otherwise clip
that overflow outright instead of scrolling to it. */
.emr-entries-grid table {
table-layout: fixed;
width: 100%;
}
/* text-overflow:ellipsis is kept for parity with legacy's source but is inert without
white-space:nowrap — deliberately not set here. word-wrap:break-word is what actually does the
work: wrapping, not clipping, is the desired behavior for every column except the nowrap
date/time columns (.emr-col-nowrap, design.md Data Tables), which are intentionally short and
exempted by carrying that class instead of relying on this default. */
.emr-ic-scroll td {
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
}
/* The header stack above .emr-ic-scroll grows taller on phone — IntervalChartToolbar and
IntervalChartPaginator restack into extra rows (design.md Phone Adaptations, "Page toolbar
strips... restacks vertically") — so the scroll container needs that difference given back.
Mirrors legacy's own --ic-scroll-extra:130px small-screen override (reused verbatim; our phone
toolbar restacking is the same shape), but keyed to design.md's own Phone breakpoint
(max-width:599.98px / LayoutContext.IsPhone), not legacy's own media query value.
Pinned to phone only, not widened to Tablet's 1279.98px: design.md's Phone Adaptations list the
toolbar-strip restack as Phone-only — Tablet keeps the single-row Desktop toolbar, so the extra
scroll compensation is not needed there. */
@media (max-width: 599.98px) {
:root {
--emr-ic-scroll-extra: 130px;
}
}
/* #endregion */
/* #region 09 Patient Search */
.emr-patient-search-dialog {
background: transparent;
box-shadow: none;
max-width: 100%;
}
.emr-patient-search-dialog .mud-dialog-content {
padding: 16px;
background: var(--mud-palette-background);
height: 100vh;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.emr-patient-search-panel {
flex: 1 1 auto;
display: flex;
flex-direction: column;
background-color: transparent !important;
background-image: url('/magnify.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.emr-patient-search-layout {
flex: 1 1 auto;
}
/* Shared "flex-fill, allow shrink" idiom (D7), reused by .emr-impersonation-body and
.emr-alerts-body .mud-tabs below — their own rules point back here. */
.emr-patient-search-body,
.emr-impersonation-body,
.emr-alerts-body .mud-tabs {
flex: 1 1 auto;
min-height: 0;
}
.emr-patient-search-status-strip {
row-gap: 0.5rem;
}
.emr-patient-search-header {
background-color: var(--mud-palette-primary);
color: var(--mud-palette-white);
border-radius: 4px 4px 0 0;
}
.emr-patient-search-header .mud-icon-root,
.emr-patient-search-header .mud-button-root,
.emr-patient-search-header .mud-icon-button {
color: var(--mud-palette-white);
}
.emr-advanced-filters-rail {
width: 280px;
flex: 0 0 280px;
align-self: stretch;
border-right: 1px solid var(--emr-hairline);
background-color: color-mix(in srgb, var(--mud-palette-surface) 92%, var(--mud-palette-background));
}
.emr-patient-search-results-wrap {
overflow-x: auto;
border-top: 1px solid var(--emr-hairline);
}
.emr-patient-search-grid {
background: var(--mud-palette-surface);
}
.emr-patient-search-grid .mud-table-container {
overflow-x: auto;
}
/* Grid header tint (D1) shared with .emr-offline-patients-grid below — same two-consumer rule,
grouped rather than a new class (see plan §4). */
.emr-patient-search-grid .mud-table-head th,
.emr-offline-patients-grid .mud-table-head th {
white-space: nowrap;
font-size: 0.875rem;
font-weight: 600;
color: var(--mud-palette-text-primary);
background: var(--emr-grid-header-bg);
}
.emr-patient-search-grid .mud-table-body td {
white-space: nowrap;
font-size: 0.9375rem;
color: var(--mud-palette-text-primary);
}
/* D11: .emr-patient-search-name's identity-text emphasis now comes from .emr-important
(applied in the .razor markup) rather than a bespoke weight-500 rule — see design.md
Typography Scale. */
/* Pinned to phone only, not widened to Tablet's 1279.98px: design.md's Phone Adaptations list the
patient search dialog's reduced padding and stacked, top/bottom-bordered filter rail as Phone-only
behavior. Tablet has room for the fixed-width filter rail sidebar and keeps Desktop's layout. */
@media (max-width: 599.98px) {
.emr-patient-search-dialog .mud-dialog-content {
padding: 8px;
}
.emr-patient-search-panel {
min-height: calc(100vh - 16px);
}
.emr-patient-search-body {
flex-direction: column;
}
.emr-advanced-filters-rail {
width: auto;
flex-basis: auto;
border-right: 0;
border-top: 1px solid var(--emr-hairline);
border-bottom: 1px solid var(--emr-hairline);
}
}
@media (max-width: 599.98px) {
.emr-patient-search-grid .mud-table-head th,
.emr-patient-search-grid .mud-table-body td {
white-space: normal;
}
}
/* #endregion */
/* #region 10 Offline Patients */
.emr-offline-patients-grid {
background: var(--mud-palette-surface);
}
.emr-offline-patients-grid .mud-table-container {
overflow-x: auto;
}
/* .mud-table-head th grouped with .emr-patient-search-grid above (D1) — the header tint is
copied verbatim from patient search, not unique to this screen. */
.emr-offline-patients-grid .mud-table-body td {
white-space: nowrap;
font-size: 0.9375rem;
color: var(--mud-palette-text-primary);
vertical-align: middle;
}
/* D11: .emr-offline-patient-name's identity-text emphasis now comes from .emr-important
(applied in the .razor markup) rather than a bespoke weight-500 rule — see design.md
Typography Scale. */
.emr-offline-patient-card {
position: relative;
padding: 12px 16px;
border-bottom: 1px solid var(--emr-hairline);
cursor: pointer;
}
.emr-offline-patient-card:last-child {
border-bottom: 0;
}
.emr-offline-patient-card-actions {
position: absolute;
top: 4px;
right: 4px;
display: flex;
align-items: center;
z-index: 1;
}
.emr-offline-patient-card-content {
padding-right: 92px;
}
@media (max-width: 599.98px) {
.emr-offline-patients-grid .mud-table-head th,
.emr-offline-patients-grid .mud-table-body td {
white-space: normal;
}
}
/* #endregion */
/* #region 11 Mini Case Sheet */
/* Mini case sheet tile: compact patient identity card mounted in the app bar */
.emr-mini-case-tile {
cursor: pointer;
padding: 2px 10px;
border: 1px solid var(--emr-hairline);
border-radius: 8px;
min-width: 120px;
max-width: 220px;
align-self: center;
}
.emr-mini-case-tile-row {
display: flex;
align-items: center;
gap: 4px;
}
.emr-mini-case-tile-name {
flex: 1 1 0;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.emr-mini-case-tile .mud-icon-button {
width: 26px;
height: 26px;
padding: 2px;
}
.emr-mini-case-tile .mud-icon-root {
font-size: 18px;
width: 18px;
height: 18px;
}
/* Mini-case dialog: lock to 70vh so tab switches don't resize the dialog
(long Diagnoses/Medications vs short General tab cause flicker otherwise).
The dialog content area scrolls; the title stays pinned. */
.emr-mini-case-dialog {
height: 70vh;
display: flex;
flex-direction: column;
}
/* Shared "flex-fill, scroll on overflow" content body (D9), reused by
.emr-workitem-detail-dialog below — its own rule points back here. */
.emr-mini-case-dialog .mud-dialog-content,
.emr-workitem-detail-dialog .mud-dialog-content {
flex: 1 1 auto;
overflow: auto;
}
/* Vertical rule between the left tab bar and the tab content panel */
.emr-mini-case-dialog .mud-tabs-tabbar {
border-right: 1px solid var(--emr-hairline);
}
/* Vertical rule separating the alerts sidebar from the main content area */
.emr-mini-case-alerts {
border-left: 1px solid var(--emr-hairline);
padding-left: 16px;
height: 100%;
}
/* Individual alert item — icon + label pair in the alerts sidebar */
.emr-mini-case-alert {
display: flex;
align-items: center;
gap: 4px;
}
/* General tab content wrapper — semantic identifier, layout owned by parent */
.emr-mini-case-general { }
/* Body grid: full-height flex container for the tab area + alerts sidebar */
.emr-mini-case-body {
height: 100%;
}
/* #endregion */
/* #region 12 Dialogs */
/* === EMR dialog chrome (opt-in) ===
Add Class="emr-dialog" to to apply the EMR-AI design language:
- Purple (primary) background + white text on the title bar
- White close-button icon so it is visible on the purple background
- 1px divider line above the action-button row
Two-class selector (.mud-dialog.emr-dialog) wins specificity over MudBlazor defaults. */
.mud-dialog.emr-dialog .mud-dialog-title {
background-color: var(--mud-palette-primary);
color: var(--mud-palette-white);
}
.mud-dialog.emr-dialog .mud-dialog-title .mud-button-root,
.mud-dialog.emr-dialog .mud-dialog-title .mud-icon-button,
.mud-dialog.emr-dialog .mud-dialog-title .mud-icon-root {
color: var(--mud-palette-white);
}
.mud-dialog.emr-dialog .mud-dialog-actions {
border-top: 1px solid var(--emr-hairline);
}
/* Minimum touch target for every DialogActions button (Cancel/Close/Save/Confirm/etc.) — Design.md Dialogs standard. */
.emr-dialog-action-btn {
min-width: 100px;
}
/* Diagnostics viewer dialogs (ConsoleOutputDialog, LocalStorageDialog): the scrolling entry
list/grid keeps a fixed viewport height so the dialog itself never grows past the screen. */
.emr-diagnostics-entry-list {
max-height: 60vh;
overflow-y: auto;
gap: 2px;
}
/* Level-filter dropdown in ConsoleOutputDialog's toolbar row — narrow by design, not full-width. */
.emr-diagnostics-level-filter {
max-width: 200px;
}
/* PDF viewer dialog only: it opens FullScreen and must let ONLY the PDF's own iframe scroll.
Make the dialog a column so the content flexes to fill between the title and the actions, and
kill the content area's default padding + scroll so there's no dialog-level scrollbar. Scoped
to .emr-pdf-dialog so other .emr-dialog dialogs keep their normal scrolling content. */
.mud-dialog.emr-pdf-dialog {
display: flex;
flex-direction: column;
}
.mud-dialog.emr-pdf-dialog .mud-dialog-content {
flex: 1 1 auto;
min-height: 0;
padding: 0;
overflow: hidden;
}
/* Workitem detail dialog sizing (70% viewport).
.mud-dialog.emr-workitem-detail-dialog has higher CSS specificity (2 classes) than MudBlazor's
.mud-dialog-width-xl (1 class), so this max-width: 70vw rule overrides the 1920px constraint.
The flexbox layout with flex: 1 1 auto on .mud-dialog-content makes it fill available space
and enables internal scrolling when content exceeds dialog height, preventing layout flicker
when tabs/data change. */
.mud-dialog.emr-workitem-detail-dialog {
max-width: 60vw;
height: 85vh;
display: flex;
flex-direction: column;
}
/* .mud-dialog-content flex body: see .emr-mini-case-dialog .mud-dialog-content grouped rule above (D9). */
@media (max-width: 1279.98px) {
.mud-dialog.emr-workitem-detail-dialog {
max-width: 100%;
height: 100%;
border-radius: 0;
margin: 0;
}
}
/* Med Orders dialog sizing (85% viewport).
.mud-dialog.emr-med-orders-dialog has higher CSS specificity (2 classes) than MudBlazor's
mud-dialog-width-xl (1 class), so this max-width: 85vw rule overrides the default constraint. */
.mud-dialog.emr-med-orders-dialog {
max-width: 85vw;
}
@media (max-width: 1279.98px) {
.mud-dialog.emr-med-orders-dialog {
max-width: 100%;
}
}
/* Training dialog: the careplan-grouped training list is long, so the list scrolls at a fixed
height instead of letting the dialog grow past the viewport. Two classes beat MudBlazor's
single-class mud-dialog-width-lg, same trick as emr-med-orders-dialog above. */
/* Training dialog: fixed height so switching between the Search and Training Provided tabs
never resizes it. The list previously carried max-height:55vh, which sizes to content — the
Provided tab is usually much shorter (often a single alert), so the dialog collapsed on every
switch. The flex chain below (dialog -> content -> EmrTabs -> .mud-tabs-panels) hands the fixed
height down to exactly ONE scrollable region, the active tab panel, so the list must NOT scroll
independently or the dialog gets two scrollbars. Same approach as emr-impersonation-dialog.
min() keeps it bounded on short viewports, where a flat 620px would overflow the screen. */
.mud-dialog.emr-training-dialog {
max-width: 900px;
height: min(620px, 80vh);
display: flex;
flex-direction: column;
}
/* Shared "fixed-height dialog, one flexible scrollable region" content body (D6), reused by
.emr-picker-dialog and .emr-impersonation-dialog below — their own rules point back here. */
.emr-training-dialog .mud-dialog-content,
.emr-picker-dialog .mud-dialog-content,
.emr-impersonation-dialog .mud-dialog-content {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* Matches the adjacent .mud-icon-button-size-medium (40px) so the "UE" button and the
refresh icon button in the profile header share one row height. */
.emr-profile-header-action {
min-height: 40px;
}
/* "Flex-fill tabs" idiom (D8). (The impersonation dialog used to share this before its
three-tab layout was replaced by the list-first design.) */
.mud-tabs.emr-training-tabs {
flex: 1 1 auto;
min-height: 0;
width: 100%;
}
.emr-training-tab-panels {
min-height: 0;
overflow-y: auto;
}
/* Careplan group rows, tightened to legacy's compact ~40px header. MudBlazor's default is
min-height:48px, and there is no min-height spacing utility to express this — the header padding
and the expanded panel's margin are handled by py-2/px-3 and ma-0 utilities at the call site.
One class more than MudBlazor's own .mud-expand-panel .mud-expand-panel-header, so this wins. */
.emr-training-dialog .mud-expand-panel .mud-expand-panel-header {
min-height: 40px;
}
/* Ordering Physician / RN Collaborator pickers: fixed height so switching the source radio
never resizes the dialog. Each source renders different content — the offline source has no
search box and often shows a single "none on file" alert, the server sources show a spinner,
then an empty-result caption or up to a page of rows — so a content-sized dialog jumped on
every switch and again as results landed. The flex chain below (dialog -> .mud-dialog-content
-> .emr-picker-body) hands the fixed height down to exactly ONE scrollable region,
.emr-picker-results, so nothing inside it may scroll independently or the dialog gets two
scrollbars. Same approach as emr-training-dialog / emr-impersonation-dialog above.
min() keeps it bounded on short viewports, where a flat 560px would overrun the screen. */
.mud-dialog.emr-picker-dialog {
height: min(560px, 80vh);
display: flex;
flex-direction: column;
}
/* .mud-dialog-content flex body: see .emr-training-dialog .mud-dialog-content grouped rule above (D6). */
.emr-picker-body {
flex: 1 1 auto;
min-width: 480px;
min-height: 0;
display: flex;
flex-direction: column;
}
/* Enforce the "static header + one flexible region" split the comment above promises. Without
this, every direct child of the column flex container above shares the free height — MudBlazor's
input wrappers (the radio group, the search field) grow by default — so a result list shorter
than the dialog was pushed into the vertical middle with equal gaps above and below it instead
of sitting at the top. Only .emr-picker-results may grow. */
.emr-picker-body > *:not(.emr-picker-results) {
flex: 0 0 auto;
}
.emr-picker-results {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
/* Top-anchor the rows explicitly, so a short list cannot be centered by whatever
layout the children end up in. */
display: flex;
flex-direction: column;
justify-content: flex-start;
}
/* Create Encounter dialog: wider than MaxWidth.Small (600px) to prevent chip truncation */
.mud-dialog.emr-create-encounter-dialog {
max-width: 720px;
}
/* User Impersonation dialog: fixed width/height so switching between the List and Add views
never resizes the dialog. The flex chain (content -> .emr-impersonation-body -> the view's
grid/list) carries the fixed height down to exactly ONE scrollable region per view —
.emr-impersonation-saved-grid on the list, .emr-impersonation-search-results on Add —
instead of letting both the dialog content and an inner grid/list scroll independently
(double scrollbars). */
.mud-dialog.emr-impersonation-dialog {
width: 40vw;
min-width: 500px;
max-width: 700px;
height: 560px;
display: flex;
flex-direction: column;
}
/* .mud-dialog-content flex body: see .emr-training-dialog .mud-dialog-content grouped rule above (D6). */
/* flex-fill idiom: see .emr-patient-search-body grouped rule above (D7). */
/* MudDivider's default "fullwidth" class carries flex-grow:1 (meant for dividers used as
flex items inside a ROW, to stretch and separate items horizontally). Inside our COLUMN
flex body it greedily grows on the vertical axis instead, pushing content down into the
middle of the dialog whenever the view is short. Pin it back to its natural (thin) size. */
.emr-impersonation-body > .mud-divider {
flex-grow: 0;
flex-shrink: 0;
}
/* List view: the saved-people grid is the ONE scrollable region. It flex-fills the fixed-height
body so the Current User row above and the Add button below never leave the screen, and its
.mud-table-container scrolls internally once the list outgrows the space — QA lists of 12-15
people previously clipped past the dialog edge (overflow:hidden content) and hid Add entirely.
FixedHeader="true" on the grid keeps the column headers pinned while rows scroll. */
.emr-impersonation-saved-grid {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.emr-impersonation-saved-grid .mud-table-container {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
/* Add view: the search-results list is that view's one scrollable region — a discipline or
program search returns up to 20 people, taller than the fixed dialog. */
.emr-impersonation-search-results {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
@media (max-width: 599.98px) {
.mud-dialog.emr-impersonation-dialog {
width: 100%;
max-width: 100%;
height: 100%;
border-radius: 0;
margin: 0;
}
}
/* === Encounter Diagnoses dialog === */
.emr-diagnoses-body {
min-width: 640px;
}
/* The ACTIVE list runs to many rows while the HISTORY tab is a single line of text, so the panel
holds a floor height — otherwise the whole dialog collapses and re-expands on every tab switch.
The list scrolls inside the panel rather than growing the dialog past the viewport. */
.emr-diagnoses-tabpanel {
min-height: 420px;
max-height: 55vh;
overflow-y: auto;
}
/* Row layout: code | text | actions. Only the TEXT column flexes, so a long diagnosis name wraps
inside its own column and the code and buttons keep their places. Letting the row itself wrap put
the buttons on their own line and opened a gap above the dates. `min-width: 0` is what actually
permits the wrap — without it a flex item refuses to shrink below its content width. */
.emr-diagnosis-row-main {
display: flex;
align-items: flex-start;
gap: 8px;
flex-wrap: nowrap;
}
.emr-diagnosis-row-text {
flex: 1 1 auto;
min-width: 0;
overflow-wrap: anywhere;
}
/* Pinned right and never squeezed — these are tap targets. */
.emr-diagnosis-row-actions {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 4px;
margin-left: auto;
}
/* Description and dates align under the diagnosis NAME, clearing the fixed-width code column, so
the row reads as one block rather than three left-aligned lines. */
.emr-diagnosis-code {
min-width: 88px;
flex: 0 0 auto;
}
.emr-diagnosis-detail,
.emr-diagnosis-dates {
padding-left: 88px;
}
/* MudBlazor's own .mud-expand-panel-content sets padding-bottom:16px but defines no padding-top at
all (_expansionpanel.scss), so every MudExpansionPanel in the app inherits a flush header-to-content
gap unless something happens to compensate. Base (unscoped) 12px minimum floor — the same universal
edge-padding convention used elsewhere in this audit pass — fixes six confirmed flush-to-header
instances at once (My Links, Demographics/Patient Care/Contact, Be Aware/Animal Alert, Start
Encounter, Outcomes, Elaborations). Scoped overrides with a documented reason for tighter spacing,
like .emr-diagnosis-groups directly below, still win on specificity. */
.mud-expand-panel-content {
padding-top: 12px;
}
/* MudBlazor gives an EXPANDED panel a 16px vertical margin and pads its content, which stacked with
each row's own padding into a visible gap under the last row of every group. The rows already carry
their own spacing, so the panel's is removed and only the content padding is kept, tight. */
.emr-diagnosis-groups .mud-expand-panel.mud-panel-expanded {
margin-top: 0;
margin-bottom: 0;
}
.emr-diagnosis-groups .mud-expand-panel-content {
padding-top: 0;
padding-bottom: 4px;
}
.emr-diagnosis-groups .mud-expand-panel-text {
padding: 0;
}
/* Eight columns of change log will not fit a narrow screen; the table scrolls in place so the dialog
itself never scrolls sideways. */
.emr-diagnosis-history-scroll {
overflow-x: auto;
max-width: 100%;
}
/* Phone. The 640px floor and the 88px indents are desktop affordances — on a narrow screen they force
the whole dialog to scroll horizontally, clipping the diagnosis text (the row Stack already wraps).
Below MudBlazor's sm breakpoint they are dropped and the row reads as stacked lines. */
@media (max-width: 599.98px) {
.emr-diagnoses-body {
min-width: 0;
}
.emr-diagnosis-code {
min-width: 0;
}
/* Only here does the row itself wrap: on a phone the actions genuinely cannot share a line with
the text, so they drop below it rather than crushing it. */
.emr-diagnosis-row-main {
flex-wrap: wrap;
}
.emr-diagnosis-detail,
.emr-diagnosis-dates {
padding-left: 0;
}
/* A phone dialog is full screen, so the list gets the height instead of a fixed panel. */
.emr-diagnoses-tabpanel {
min-height: 0;
max-height: none;
}
}
/* A diagnosis end-dated or removed during this encounter stays listed so it can be checked or undone,
but it is no longer active — muted rather than removed, and never conveyed by color alone (the row
still carries its explicit "End: " text or "Removed" chip). */
.emr-diagnosis-row--ended {
opacity: 0.6;
}
/* Rule violations (R01-R09). The panel keeps the error tint of the alert it replaced, so a COLLAPSED
panel still reads as a problem — the header's icon and count carry the rest. */
.emr-diagnosis-violations-panel .mud-expand-panel {
background-color: var(--mud-palette-error-hover);
border-radius: var(--mud-default-borderradius);
}
/* === Allergies feature styles === */
/* Delete Allergy confirm dialog */
.mud-dialog.emr-allergy-delete-dialog .emr-delete-allergy-name {
font-size: var(--mud-typography-body1-size);
font-weight: var(--mud-typography-body1-weight);
line-height: var(--mud-typography-body1-lineheight);
letter-spacing: var(--mud-typography-body1-letterspacing);
color: var(--mud-palette-primary);
}
/* #endregion */
/* #region 12b Dialogs — design-audit additions (2026-10-01) */
/* QuestionHistoryDialog */
.emr-question-history-body {
min-height: 160px;
max-height: 60vh;
overflow-y: auto;
}
.emr-question-history-question {
min-width: 260px;
flex-shrink: 0;
}
/* MedOrdersDialog / HmeOrdersDialog / OtherOrdersListDialog */
.emr-col-order-careplan {
width: 35%;
}
/* AllowedSecondariesDialog / DiagnosisSearchDialog */
.emr-secondaries-dialog-body {
min-width: 460px;
}
.emr-secondaries-list {
max-height: 320px;
overflow-y: auto;
}
/* MedOrdersDialog / EncounterDocumentsDialog — grid cells and group rows left-aligned */
.mud-table-cell.emr-col-justify-start {
justify-content: flex-start;
}
.emr-doc-group-title {
flex: 1;
text-align: left;
}
.mud-typography.emr-grid-header-label {
font: inherit;
letter-spacing: inherit;
}
/* ViewEncounterJsonDialog */
.emr-view-json-tree {
max-height: 60vh;
overflow: auto;
padding: 12px;
border-radius: 4px;
background: var(--mud-palette-background-gray, #f5f5f5);
border: 1px solid var(--mud-palette-lines-default, #e0e0e0);
}
/* LookupTreeDialog */
.emr-lookup-tree-scroll {
min-width: 360px;
min-height: 480px;
max-height: 480px;
overflow-y: auto;
}
.emr-lookup-tree-row {
border-radius: 4px;
}
.emr-lookup-tree-row:hover {
background-color: var(--mud-palette-action-hover);
}
.emr-lookup-tree-toggle {
flex-shrink: 0;
}
.emr-lookup-tree-toggle-spacer {
width: 28px;
flex-shrink: 0;
}
.emr-lookup-tree-label {
flex: 1;
}
.emr-lookup-tree-clickable {
cursor: pointer;
padding: 5px 8px;
border-radius: 4px;
user-select: none;
}
.emr-lookup-tree-selected {
background-color: var(--mud-palette-primary);
color: var(--mud-palette-primary-text);
font-weight: 500;
}
/* DiagnosisEndDateDialog / DiagnosisDetailsDialog */
.emr-diagnosis-enddate-body {
min-width: 420px;
}
.emr-diagnosis-details-body {
min-width: 480px;
}
.emr-diagnosis-code-col {
min-width: 88px;
}
/* MedicationPickerDialog — one medication per row, same fixed-geometry list treatment as the
qualifier picker, with the PON card's name/directions/coverage stack. */
.emr-med-picker-body {
min-width: 480px;
}
.mud-stack.emr-med-pick-row {
gap: 10px;
padding: 8px 10px;
border-radius: 4px;
cursor: pointer;
user-select: none;
}
.emr-med-pick-row:not(:last-of-type) {
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.emr-med-pick-row:hover {
background: rgba(0,0,0,0.04);
}
.emr-med-pick-row-selected {
background: var(--mud-palette-primary-hover);
}
.emr-med-pick-icon {
flex-shrink: 0;
margin-top: 2px;
}
/* ResetRtcWarningDialog / NeedFullyDiscontinuedDialog / ResponseToCareDialog */
.emr-rtc-dialog-body {
min-width: 460px;
max-width: 600px;
}
/* ResponseToCareDialog (class names shared with RtcOptionView, which is outside this batch) */
.rtc-group-head { font-size: 12px; letter-spacing: .04em; }
.rtc-opt-row {
display: flex; align-items: flex-start; gap: 10px;
padding: 7px 8px; border-radius: 4px; cursor: pointer; user-select: none;
}
.rtc-opt-row:hover { background: rgba(0,0,0,0.04); }
.rtc-opt-row-selected { background: var(--mud-palette-primary-hover); }
/* PhysicianPickerDialog / StaffPickerDialog / MedicationPickerDialog */
.emr-pick-row-text {
flex: 1;
min-width: 0;
}
.phys-pick-row,
.staff-pick-row {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 8px 10px;
border-radius: 4px;
cursor: pointer;
user-select: none;
}
.phys-pick-row:not(:last-of-type),
.staff-pick-row:not(:last-of-type) {
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.phys-pick-row:hover,
.staff-pick-row:hover {
background: rgba(0,0,0,0.04);
}
.phys-pick-row-selected,
.staff-pick-row-selected {
background: var(--mud-palette-primary-hover);
}
.phys-pick-icon,
.staff-pick-icon {
flex-shrink: 0;
margin-top: 2px;
}
/* SymptomHistoryDialog */
.symptom-history-tabs .mud-tabs-panels {
min-height: 200px;
max-height: 60vh;
overflow-y: auto;
}
/* RnReportPreviewDialog */
.emr-rn-report-body {
min-width: 480px;
}
/* PalliationProvocationDialog */
.emr-pp-grid .mud-table-head .mud-table-cell {
background: var(--mud-palette-primary);
color: var(--mud-palette-primary-text);
font-weight: 600;
text-align: left;
white-space: nowrap;
}
.emr-pp-grid .mud-table-head .mud-table-cell.emr-pp-col-flag,
.emr-pp-grid .mud-table-body .mud-table-cell.emr-pp-col-flag {
text-align: center;
width: 1%;
white-space: nowrap;
}
.emr-pp-grid .mud-table-body .mud-table-row:nth-child(even) {
background: rgba(0, 0, 0, 0.025);
}
.emr-pp-other-bar {
border-top: 1px solid rgba(0, 0, 0, 0.08);
padding-top: 12px;
}
.emr-pp-other-row {
max-width: 480px;
}
/* AddSymptomDialog — the dialog body is a fixed height so the search box doesn't bounce around as the
list filters down. The list itself scrolls inside this region. */
.emr-add-symptom-content {
min-height: 480px;
}
.emr-add-symptom-list-scroll {
flex: 1;
min-height: 420px;
max-height: 420px;
overflow-y: auto;
}
/* EditLabelDialog */
.emr-text-bold {
font-weight: 700;
}
.emr-pre-wrap {
white-space: pre-wrap;
word-break: break-word;
}
/* AddOtherOrderDialog / CloseReasonDialog — content min-width 480px plus dialog padding */
.mud-dialog.emr-add-other-order-dialog,
.mud-dialog.emr-close-reason-dialog {
min-width: 528px;
}
/* InterventionBuilderDialog */
.mud-dialog.emr-intervention-builder-dialog {
min-width: 568px;
}
.emr-intervention-preview {
background: color-mix(in srgb, var(--mud-palette-info) 6%, transparent);
}
/* The read-only Specifier can be a long custom Need name — let it wrap and grow
instead of clipping to a single line. */
.spec-field .mud-input-control-input-container {
white-space: normal;
word-break: break-word;
}
/* QualifierPickerDialog */
.emr-qualifier-list {
min-width: 360px;
}
/* One option per row — fixed geometry, so nothing moves when a row is picked
(the chip layout reflowed on selection because chip widths changed). */
.emr-qualifier-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 4px;
cursor: pointer;
user-select: none;
}
.emr-qualifier-row:not(:last-of-type) {
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.emr-qualifier-row:hover {
background: rgba(0,0,0,0.04);
}
.emr-qualifier-row-selected {
background: var(--mud-palette-primary-hover);
}
.emr-qualifier-row-disabled {
opacity: 0.45;
cursor: default;
pointer-events: none;
}
.emr-qualifier-row-icon {
flex-shrink: 0;
}
.emr-qualifier-row-label {
word-break: break-word;
}
/* REQTEXT input sits indented under its row, aligned with the label text. */
.emr-qualifier-row-text {
margin: 2px 10px 10px 36px;
}
/* SpecifierInterventionsDialog */
.mud-dialog.emr-specifier-interventions-dialog {
min-width: 588px;
}
.emr-spec-row {
width: 100%;
padding: 4px 0;
}
.emr-spec-row:not(:last-child) {
border-bottom: 1px solid rgba(0,0,0,0.05);
}
/* Service items (Meds / HME / Supplies / Other Orders) read as cards — one item
per row with the name on the option line and the description beneath. */
.emr-spec-row-card {
border: 1px solid rgba(0,0,0,0.10);
border-radius: 4px;
padding: 6px 10px;
margin-bottom: 6px;
}
.emr-spec-row-card:not(:last-child) {
border-bottom: 1px solid rgba(0,0,0,0.10);
}
/* Description sits under the checkbox/radio label, aligned with its text. */
.emr-spec-description {
display: block;
margin-left: 32px;
margin-top: -4px;
white-space: pre-wrap;
word-break: break-word;
}
/* Force the radio options to stack one-per-row (MudRadioGroup lays children out
inline by default). The selected option's interventions then render beneath it.
Target both the group root and its inner container so it works regardless of
MudRadioGroup's internal DOM. */
.emr-spec-radio-group,
.emr-spec-radio-group > .mud-input-control-input-container {
display: flex !important;
flex-direction: column;
align-items: stretch;
}
/* Intervention group sits indented under its checkbox/radio, like the screenshot. */
.emr-spec-interventions {
margin-left: 32px;
margin-bottom: 8px;
}
/* One plus, one color: the label dropped its literal "+" (the StartIcon is
the plus) and the icon is pinned to the button's text color so it never
renders darker than the label. */
.emr-add-intervention-btn .mud-icon-root {
color: inherit;
}
/* EncounterStatisticsDialog */
.emr-col-right { text-align: right; }
/* PdfViewerDialog */
.emr-pdf-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ImpersonationDisciplineDialog */
.emr-impersonation-search-name { max-width: 200px; }
.emr-impersonation-search-discipline { min-width: 220px; }
.emr-impersonation-search-program { max-width: 160px; }
/* FavoritesDialog */
.emr-min-w-0 { min-width: 0; }
/* WorkitemDetailDialog */
.mud-divider.emr-workitem-lock-divider { height: 24px; }
.emr-workitem-status-chip { width: fit-content; }
/* #endregion */
/* #region 13 Notifications / Animations */
/* EncounterLoadingOverlay — full-page dark scrim, centered progress card. */
.emr-encounter-loading-card {
min-width: 340px;
text-align: center;
}
.emr-encounter-loading-bar .mud-progress-linear-bar {
transition: transform 0.35s ease;
}
/* Probing/Checking dot: pulse opacity to signal in-progress state without color alone (DL-14.4). */
@keyframes emr-dot-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.25; }
}
.emr-status-dot--probing {
animation: emr-dot-pulse 1.2s ease-in-out infinite;
}
/* Honour reduced-motion preference — fall back to a solid dot with no animation. */
@media (prefers-reduced-motion: reduce) {
.emr-status-dot--probing {
animation: none;
}
}
/* Page transition: MainLayout keys the @Body wrapper on the route so Blazor remounts
it on navigation, letting this run fresh each time (e.g. Encounters "Resume", Home → patient details). */
@keyframes emr-page-fade-in {
from { opacity: 0; transform: translateY(127px); }
to { opacity: 1; transform: translateY(0); }
}
.emr-page-transition {
animation: emr-page-fade-in 200ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
.emr-page-transition {
animation: none;
}
}
/* ── Progress notification pill ─────────────────────────────────────── */
.emr-progress-notification-overlay {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9998;
}
.emr-progress-notification-pill {
position: absolute;
top: 68px;
left: 50%;
pointer-events: auto;
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: 9999px;
border: 1px solid var(--mud-palette-lines-default);
background: var(--mud-palette-info);
color: var(--mud-palette-white);
white-space: nowrap;
font-size: 0.875rem;
}
.emr-pill-enter {
animation: emr-pill-drop 200ms ease-out forwards;
}
.emr-pill-exit {
animation: emr-pill-rise 200ms ease-in forwards;
}
@keyframes emr-pill-drop {
from { transform: translateX(-50%) translateY(-120%); opacity: 0; }
to { transform: translateX(-50%) translateY(0); opacity: 1; }
}
@keyframes emr-pill-rise {
from { transform: translateX(-50%) translateY(0); opacity: 1; }
to { transform: translateX(-50%) translateY(-120%); opacity: 0; }
}
@keyframes emr-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.emr-progress-notification-message {
max-width: 480px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* === Shared classes extracted from inline styles (design-issues-2026-06-04) === */
.emr-progress-notification-icon {
flex-shrink: 0;
}
.emr-progress-notification-spinner {
animation: emr-spin 1.2s linear infinite;
}
/* === EmrAnimate === */
.emr-animate-host {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
.emr-animate--in-progress {
pointer-events: none;
}
.emr-animate-content--hidden {
visibility: hidden;
}
.emr-animate-dots {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
}
.emr-animate-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background-color: currentColor;
animation: emr-dot-pulse 1.2s ease-in-out infinite;
}
.emr-animate-dot:nth-child(2) { animation-delay: 0.2s; }
.emr-animate-dot:nth-child(3) { animation-delay: 0.4s; }
@media (prefers-reduced-motion: reduce) {
.emr-animate-dot {
animation: none;
opacity: 0.4;
}
}
/* #endregion */
/* #region 14 Badges / Status Indicators */
.emr-hme-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 3px;
font-size: var(--mud-typography-caption-size);
font-weight: 600;
letter-spacing: 0.04em;
white-space: nowrap;
}
.emr-hme-badge--hme { background: var(--emr-hme-badge-hme-bg); color: var(--emr-hme-badge-hme-text); }
.emr-hme-badge--supplies { background: var(--emr-hme-badge-supplies-bg); color: var(--emr-hme-badge-supplies-text); }
/* "NEW" indicator on interventions/symptoms/needs added during the current encounter —
a compact, non-interactive badge (shorter than a standard chip, close to the text line
height) that flows inline at the end of the item's text. Shared by the care-plan Needs
list (InterventionGroupList), the RTC worklist (RtcGroupView), NeedItem, and SymptomItem.
Color is owned entirely here (not by a MudChip Color= prop at each call site) so it can
be changed in one place — every "NEW" chip omits Color= and relies on this rule instead;
the two-class selector beats MudChip's own size/margin/color rules. */
.emr-new-chip.mud-chip {
height: 16px;
padding: 0 6px;
font-size: 10px;
font-weight: 600;
border-radius: 8px;
margin: 0 0 0 6px;
vertical-align: middle;
background-color: var(--mud-palette-info);
color: var(--mud-palette-info-text);
}
/* #endregion */
/* #region 15 Contact / Links */
.emr-contact-link {
color: var(--mud-palette-primary);
text-decoration: none;
font-weight: 500;
}
.emr-contact-link-type {
font-size: var(--mud-typography-caption-size);
font-weight: var(--mud-typography-caption-weight);
color: var(--mud-palette-text-secondary);
}
/* #endregion */
/* #region 16 Utilities */
.emr-icon-sm {
font-size: 1.1rem;
}
.emr-dim {
opacity: 0.5 !important;
}
/* Muted/zero value indicator — used when a numeric field is 0 or empty */
.emr-muted { color: var(--mud-palette-text-disabled); }
.emr-select-min-width {
min-width: 140px;
}
/* Pending Approval / Active / All Tasks filter rows: Tablet and Phone collapse Program/Team/Vx/
Status behind a filter-toggle button (AllTasksPage.razor, PendingApprovalTab.razor) instead of
wrapping the whole control set onto multiple lines, so .emr-tasks-filter-row only ever needs to
fit Search + the toggle at those widths. The expanded panel is a sibling MudStack with its own
Row/Wrap/Spacing props — no dedicated CSS class needed. */
.emr-doc-action-col {
width: 140px;
}
.emr-dev-error-stacktrace {
font-family: monospace;
font-size: 0.75rem;
max-height: 200px;
overflow: auto;
white-space: pre-wrap;
margin-top: 0.5rem;
}
/* PDF viewer dialog — fullscreen MudDialog with iframe */
/* Fill the dialog content area (not the viewport) so the container doesn't overflow and add
its own scrollbar. */
.emr-pdf-container {
width: 100%;
height: 100%;
display: flex;
}
/* Two renderers live in here (see pdf-viewer.js). On desktop the child is the browser's own PDF
| |