Prevent text jumping because of font-weight change on active tabs item

[MAILPOET-2776]

assets/css/src/components/_steps.scss

@@ -64,7 +64,7 @@
 
   // Hack so the text is not jumping when changed to bold when active
   &:before {
-    content: attr(title);
+    content: attr(data-title);
     display: block;
     font-weight: bold;
     height: 0;

assets/css/src/components/_tabs.scss

@@ -58,6 +58,7 @@
     background: $color-white;
     border-color: $color-tertiary-light;
     color: $color-secondary;
+    font-weight: bold;
   }
 
   svg {
@@ -78,6 +79,16 @@
       margin-right: 0;
     }
   }
+
+  // Hack so the text is not jumping when changed to bold when active
+  > span:before {
+    content: attr(data-title);
+    display: block;
+    font-weight: bold;
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+  }
 }
 
 .mailpoet-tabs-title {

assets/js/src/common/steps/steps.tsx

@@ -19,7 +19,7 @@ const Steps = ({ count, current, titles }: Props) => (
         })}
       >
         <div className="mailpoet-step-badge">{i >= current ? i : ''}</div>
-        {titles[i - 1] && <div className="mailpoet-step-title" title={titles[i - 1] || ''}>{titles[i - 1] || ''}</div>}
+        {titles[i - 1] && <div className="mailpoet-step-title" data-title={titles[i - 1] || ''}>{titles[i - 1] || ''}</div>}
       </div>
     ))}
   </div>

assets/js/src/common/tabs/tabs.tsx

@@ -73,7 +73,7 @@ const Tabs = ({
   const title = (props) => (
     <>
       {props.iconStart}
-      {props.title && <span>{props.title}</span>}
+      {props.title && <span data-title={props.title}>{props.title}</span>}
       {props.iconEnd}
     </>
   );