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 <[email protected]> Co-authored-by: DaniGuardiola <[email protected]> Co-authored-by: tyxla <[email protected]>
WordPress · Jun 4, 2024 · a9fd33c · a9fd33c
1 parent 34fa834
commit a9fd33c
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git 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
@@ -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?.();
 		}