From 87daf49374c7c74b05d4b0ab345175c21cf934e3 Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Tue, 4 Jun 2024 22:49:25 +0900 Subject: [PATCH] Tabs: Prevent accidental overflow in indicator (#61979) * Tabs: Consider decimal point in indicator style * Update changelog * Naive solution. * Subpixel size and position workaround. * Add comment. * Move CHANGELOG entry to Unreleased section --------- Co-authored-by: t-hamano Co-authored-by: DaniGuardiola Co-authored-by: tyxla --- packages/components/CHANGELOG.md | 4 ++++ packages/components/src/tabs/tablist.tsx | 10 ++++++---- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index e8d65cfd9ce83..fd89e5e01fd0f 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -6,6 +6,10 @@ - Add `text-wrap: balance` fallback to all instances of `text-wrap: pretty` for greater cross browser compatibility. ([#62233](https://github.com/WordPress/gutenberg/pull/62233)) +### Bug Fixes + +- `Tabs`: Prevent accidental overflow in indicator ([#61979](https://github.com/WordPress/gutenberg/pull/61979)). + ## 28.0.0 (2024-05-31) ### Breaking Changes diff --git a/packages/components/src/tabs/tablist.tsx b/packages/components/src/tabs/tablist.tsx index cbd4290f06bff..917bcbe755ee0 100644 --- a/packages/components/src/tabs/tablist.tsx +++ b/packages/components/src/tabs/tablist.tsx @@ -53,10 +53,12 @@ function useTrackElementOffset( function updateIndicator( element: HTMLElement ) { setIndicatorPosition( { - left: element.offsetLeft, - top: element.offsetTop, - width: element.offsetWidth, - height: element.offsetHeight, + // Workaround to prevent unwanted scrollbars, see: + // https://github.com/WordPress/gutenberg/pull/61979 + left: Math.max( element.offsetLeft - 1, 0 ), + top: Math.max( element.offsetTop - 1, 0 ), + width: parseFloat( getComputedStyle( element ).width ), + height: parseFloat( getComputedStyle( element ).height ), } ); updateCallbackRef.current?.(); }