From 7294df59ef534375a2eb2870111035aa1c4e6628 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Tue, 10 Dec 2024 16:27:29 +0100
Subject: [PATCH] Prevent bold text in selected tab from affecting layout

---
 packages/css/src/components/tabs/tabs.scss | 15 +++++++++++++++
 packages/react/src/Tabs/TabsButton.tsx     |  7 ++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/packages/css/src/components/tabs/tabs.scss b/packages/css/src/components/tabs/tabs.scss
index 97b153156a..f9df81959f 100644
--- a/packages/css/src/components/tabs/tabs.scss
+++ b/packages/css/src/components/tabs/tabs.scss
@@ -28,6 +28,7 @@
 .ams-tabs__button {
   color: var(--ams-tabs-button-color);
   cursor: var(--ams-tabs-button-cursor);
+  display: grid;
   font-family: var(--ams-tabs-button-font-family);
   font-size: var(--ams-tabs-button-font-size);
   font-weight: var(--ams-tabs-button-font-weight);
@@ -62,3 +63,17 @@
     }
   }
 }
+
+.ams-tabs__button-label,
+.ams-tabs__button-label-hidden {
+  grid-area: 1 / 1;
+}
+
+// This hidden label is used to prevent a layout shift when the mega menu is opened
+// and the button text becomes bold.
+.ams-tabs__button-label-hidden {
+  font-weight: var(--ams-tabs-button-selected-font-weight);
+  pointer-events: none;
+  user-select: none;
+  visibility: hidden;
+}
diff --git a/packages/react/src/Tabs/TabsButton.tsx b/packages/react/src/Tabs/TabsButton.tsx
index 9c41b9d214..d0f495bdd0 100644
--- a/packages/react/src/Tabs/TabsButton.tsx
+++ b/packages/react/src/Tabs/TabsButton.tsx
@@ -33,7 +33,12 @@ export const TabsButton = forwardRef(
         role="tab"
         tabIndex={activeTab === tab ? 0 : -1}
       >
-        {children}
+        <span aria-hidden="true" className="ams-tabs__button-label-hidden">
+          {children}
+        </span>
+        <span aria-hidden="true" className="ams-tabs__button-label">
+          {children}
+        </span>
       </button>
     )
   },