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]>

Author: 3 people

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

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?.();
 		}