perf(UnderlineNav): Batch layout reads and improve readability

.changeset/perf-underlinenav-item-observer.md

@@ -0,0 +1,8 @@
+---
+'@primer/react': patch
+---
+
+perf(UnderlineNav): Batch layout reads and add comment about ResizeObserver throttling
+
+- UnderlineNavItem: Batch getBoundingClientRect and getComputedStyle reads
+- UnderlineNav: Add comment noting ResizeObserver callbacks are now throttled

packages/react/src/UnderlineNav/UnderlineNav.tsx

@@ -291,6 +291,7 @@ export const UnderlineNav = forwardRef(
 
     useOnOutsideClick({onClickOutside: closeOverlay, containerRef, ignoreClickRefs: [moreMenuBtnRef]})
 
+    // ResizeObserver callbacks are now throttled with rAF for better INP
     useResizeObserver((resizeObserverEntries: ResizeObserverEntry[]) => {
       const navWidth = resizeObserverEntries[0].contentRect.width
       const moreMenuWidth = moreMenuRef.current?.getBoundingClientRect().width ?? 0

packages/react/src/UnderlineNav/UnderlineNavItem.tsx

@@ -91,11 +91,15 @@ export const UnderlineNavItem = forwardRef(
         ) as HTMLElement
         const text = content.textContent as string
 
-        const iconWidthWithMargin = icon
-          ? icon.getBoundingClientRect().width +
-            Number(getComputedStyle(icon).marginRight.slice(0, -2)) +
-            Number(getComputedStyle(icon).marginLeft.slice(0, -2))
-          : 0
+        let iconWidthWithMargin = 0
+        if (icon) {
+          // Batch all layout reads: getBoundingClientRect and getComputedStyle together
+          const iconRect = icon.getBoundingClientRect()
+          const iconStyle = getComputedStyle(icon)
+          // Use || 0 fallback for edge cases where margin might be 'auto' or non-numeric
+          iconWidthWithMargin =
+            iconRect.width + (parseFloat(iconStyle.marginRight) || 0) + (parseFloat(iconStyle.marginLeft) || 0)
+        }
 
         setChildrenWidth({text, width: domRect.width})
         setNoIconChildrenWidth({text, width: domRect.width - iconWidthWithMargin})