Summary
Card renders as an HTML <fieldset> (see cmp/card/Card.ts - it returns fieldset({...})). <fieldset> carries a browser UA-default min-width: min-content, the well-known fieldset-in-flexbox quirk where a fieldset refuses to shrink below its content's intrinsic width.
In a width-constrained flex column - e.g. a mobile form column narrower than the card's content - the card therefore will not shrink to fit. It overflows its container, and because Box-based containers default to overflow: hidden, the excess is silently clipped, including the card's right border. The clipping is invisible on borderless inputs but obvious on anything with a right border (it surfaced as a missing right border on an outlined input nested in a formFieldSet).
Reproduction
Place a Card / formFieldSet whose content is wider than its column on a narrow (mobile) viewport. The card stays wider than the column and its right edge - border and content - is sliced off by the container's overflow: hidden.
Proposed fix
Add min-width: 0 to .xh-card in Card.scss. This is the standard remedy for the <fieldset> flexbox quirk (applied by many CSS frameworks) and lets the card shrink to its container. It neutralizes a UA quirk rather than removing intentional behavior - anywhere a true minimum is wanted, an explicit minWidth can still be set.
Suggested validation: regression pass across Toolbox desktop + mobile, especially cards holding grids or fixed-width content, to confirm nothing relied on the fieldset's non-shrinking behavior.
Secondary note (context, not necessarily a change)
Box defaults to overflow: hidden, which is what made this failure silent - the overflow is clipped rather than scrolled or visibly spilling. This is likely intended for most Hoist containers; noting it here as the reason the clip was easy to miss.
Summary
Cardrenders as an HTML<fieldset>(seecmp/card/Card.ts- it returnsfieldset({...})).<fieldset>carries a browser UA-defaultmin-width: min-content, the well-known fieldset-in-flexbox quirk where a fieldset refuses to shrink below its content's intrinsic width.In a width-constrained flex column - e.g. a mobile form column narrower than the card's content - the card therefore will not shrink to fit. It overflows its container, and because
Box-based containers default tooverflow: hidden, the excess is silently clipped, including the card's right border. The clipping is invisible on borderless inputs but obvious on anything with a right border (it surfaced as a missing right border on an outlined input nested in aformFieldSet).Reproduction
Place a
Card/formFieldSetwhose content is wider than its column on a narrow (mobile) viewport. The card stays wider than the column and its right edge - border and content - is sliced off by the container'soverflow: hidden.Proposed fix
Add
min-width: 0to.xh-cardinCard.scss. This is the standard remedy for the<fieldset>flexbox quirk (applied by many CSS frameworks) and lets the card shrink to its container. It neutralizes a UA quirk rather than removing intentional behavior - anywhere a true minimum is wanted, an explicitminWidthcan still be set.Suggested validation: regression pass across Toolbox desktop + mobile, especially cards holding grids or fixed-width content, to confirm nothing relied on the fieldset's non-shrinking behavior.
Secondary note (context, not necessarily a change)
Boxdefaults tooverflow: hidden, which is what made this failure silent - the overflow is clipped rather than scrolled or visibly spilling. This is likely intended for most Hoist containers; noting it here as the reason the clip was easy to miss.