#812·themes

[Card] misalignment with Inset contents

Author: stevesimsCreated Jul 15, 2026Updated Jul 15, 2026

There's a very subtle bug within the Card component whereby it's content will be positioned at 1px difference to content placed inside an Inset component with equivalent padding applied.

The underlying cause of this is that an Inset component applies margins to itself to reverse the internal padding of a Card, subtracting 1px for the Card's border width. However the Card as rendered does not actually use a real border - instead the effect is achieved with an ::after pseudo-element inside the Card with an internal box-shadow - so the natural position of the contents inside a Card is not affected by that fake border.

Logically what the Inset component is doing is valid and correct, as failing to compensate for the Card's fake border would mean that contents inside the Inset would overlap with the border, which would be undesirable.

What the Card component should really be doing is adding the border width onto the padding it applies. If it did that then the Card's styling would be as if it were using a real border, and the margin compensation that Inset does would match correctly.