grid item (no overflow of its own) bubbles up the min-content width of ANY descendant, including a `.rc-table-wrap`- wrapped table several levels down, regardless of that wrapper's own overflow-x:auto. Proven live: the Dashboard's "Recent feedback" grid item forced the page to scrollWidth=758 at a 390px viewport once a real feedback row carried a long unbreakable ActiveScreen value (a table's min-content is its narrowest UNBREAKABLE token per column, not each cell's wrapped height -- so ordinary multi-word content wraps and stays narrow, but one long token does not). min-width:0 on the grid item overrides that default, letting it shrink to its track's actual width -- the descendant `.rc-table-wrap` then does its OWN job of scrolling internally. Scoped to `> *` (immediate children only) so it reaches every current/future consumer of these grid classes without requiring each call site to remember a utility class. */ .rc-grid-2 > *, .rc-grid-2--narrow-right > *, .rc-grid-2--sidebar > *, .rc-check-grid > * { min-width: 0; } /* The theme editor's fixed right-hand inspector panel (desktop: 380px docked to the edge) would itself force page-width overflow at phone width -- make it a full-width panel instead of a narrow sliver pinned off the right edge. */ .rc-theme-editor-grid.rc-inspector-mode { width: 100%; max-width: 100%; } /* REWORK (Tester finding 2, 2026-07-22): the shared skill picker's per-skill row (`_SkillPicker.cshtml`, `.rc-flex rc-items-center rc-gap-2 rc-skill-row`) is a nowrap flex row by default (`.rc-flex` sets no wrap) -- fine at desktop, where `.rc-card` is wide, but this ticket's shell reflow narrows `.rc-card` at phone width for the first time, and the row's fixed-width min/max number inputs (`.rc-input--xs`) plus the label's own 168px min-width no longer fit on one line, pushing the min/max inputs' right edge past the card (previously masked because the WHOLE PAGE scrolled instead of the card alone). Nothing here changes desktop rendering: flex-wrap only has an effect once a line's content actually exceeds the row's width (never true at >=768px), and .rc-skill-row__break only has a non-zero flex-basis inside this same media query. */ .rc-skill-row { flex-wrap: wrap; } /* First attempt (flex-wrap alone) left a 3px residual overflow on the min-input -- the browser's own line-packing decision (based on each skill NAME's rendered width, which varies per skill) is not deterministic enough to guarantee the numeric cluster always lands on a fresh line. `.rc-skill-row__break` (an always-empty span the partial renders right before the min-input) is the standard flex "line break" technique: forcing IT to claim a full line's width deterministically pushes every item after it (min/dash/max/count) onto a new line together, regardless of how wide the checkbox+label content happens to be. */ .rc-skill-row__break { flex-basis: 100%; } }

next to an existing, unchanged, visible