diff --git a/.changeset/underline-wrapper-force-box-sizing.md b/.changeset/underline-wrapper-force-box-sizing.md new file mode 100644 index 00000000000..fa03ed4b145 --- /dev/null +++ b/.changeset/underline-wrapper-force-box-sizing.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Pin `box-sizing` with `!important` on the underline tabbed interface wrapper in wrap mode so external overrides can no longer offset its height budget and incorrectly trigger the overflow "more" menu diff --git a/packages/react/src/internal/components/UnderlineTabbedInterface.module.css b/packages/react/src/internal/components/UnderlineTabbedInterface.module.css index 8e55f1a796d..7beddcdff52 100644 --- a/packages/react/src/internal/components/UnderlineTabbedInterface.module.css +++ b/packages/react/src/internal/components/UnderlineTabbedInterface.module.css @@ -23,8 +23,8 @@ overflow: hidden; max-height: var(--control-xlarge-size); - /* Pin the vertical box model so external border/padding overrides can't change the height budget and incorrectly trigger the overflow "more" menu */ - box-sizing: border-box; + /* Pin the vertical box model so external box-sizing/border/padding overrides can't change the height budget and incorrectly trigger the overflow "more" menu */ + box-sizing: border-box !important; border-block: 0 !important; padding-block: var(--base-size-8) 0 !important;