From fabd71c75c0b7f0337368d2c538d651383248efb Mon Sep 17 00:00:00 2001
From: Martavis Parker <47053705+martavis@users.noreply.github.com>
Date: Mon, 31 Jan 2022 17:30:35 -0800
Subject: [PATCH] fixed css for bold text in react tabs (#3943)

---
 frontend/components/TabsWrapper/_styles.scss | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/frontend/components/TabsWrapper/_styles.scss b/frontend/components/TabsWrapper/_styles.scss
index faa0ba35a9..d56de1f803 100644
--- a/frontend/components/TabsWrapper/_styles.scss
+++ b/frontend/components/TabsWrapper/_styles.scss
@@ -13,13 +13,27 @@
       margin-right: $pad-xxlarge;
       font-size: $x-small;
       border: none;
+      display: inline-flex;
+      flex-direction: column;
+      align-items: center;
 
       &:focus {
         box-shadow: none;
         outline: 0;
       }
+      // Bolding text when the button is active causes a layout shift
+      // so we add a hidden pseudo element with the same text string
+      &:before {
+        content: attr(data-text);
+        height: 0;
+        visibility: hidden;
+        overflow: hidden;
+        user-select: none;
+        pointer-events: none;
+        font-weight: $bold;
+      }
       &--selected {
-        text-shadow: -0.3px 0 #192147, 0.3px 0 #192147;
+        font-weight: $bold;
 
         &::after {
           content: "";