ithaka/pharos

Button: `display` + `contain` values lead to extra space in containing element

Opened this issue · 0 comments

Expected behavior

  • A button's rendered content touches all four walls of its real estate
  • Elements around the button also behave such that those four walls are the button's edges

Actual behavior

The button itself does touch all four of its walls:

Screenshot 2024-04-25 at 14 33 40

But a containing div placed around it can be observed to have extra space below:

Screenshot 2024-04-25 at 14 35 05

This appears to be due to some combination of the contain: layout and display: inline-flex used for buttons.

This is observable in Storybook as well.