From 4aed0d0bf97b70de6f8dac960fcee91da12a0f02 Mon Sep 17 00:00:00 2001 From: Copilot <223556219+Copilot@users.noreply.github.com> Date: Tue, 25 Aug 2026 05:54:56 +0000 Subject: [PATCH] Force box-sizing on underline wrapper in wrap mode Pin box-sizing with !important (alongside the existing border-block and padding-block overrides) on the underline tabbed interface wrapper's wrap-mode rule so an external box-sizing override can't change the height budget used for overflow detection and incorrectly trigger the overflow 'more' menu. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .changeset/underline-wrapper-force-box-sizing.md | 5 +++++ .../internal/components/UnderlineTabbedInterface.module.css | 4 ++-- 2 files changed, 7 insertions(+), 2 deletions(-) create mode 100644 .changeset/underline-wrapper-force-box-sizing.md 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;