Displaying symbols as TabTitle content (CMEM-7208)

Author: fiorsaoirse

CHANGELOG.md

@@ -24,6 +24,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     -    take Markdown rendering into account before testing the maximum preview length
 -   `<NodeContent />`
     -   header-menu items are vertically centered now
+    `<TabTitle />`
+    -   adjust displaying fallback symbols in different browsers
 
 ### Changed
 

src/components/Tabs/stories/TabTitle.stories.tsx

@@ -1,15 +1,15 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Tabs, TabTitle as TabTitleOrg } from "./../../../";
+import { Tabs, TabTitle as TabTitleOrg, TabTitleProps } from "./../../../";
 
 export default {
     title: "Components/Tabs/TabTitle",
     component: TabTitleOrg,
     argTypes: {},
 } as Meta<typeof TabTitleOrg>;
 
-const TabTitle = (args) => {
+const TabTitle = (args: React.JSX.IntrinsicAttributes & TabTitleProps) => {
     return (
         <Tabs
             id="titledemo"
@@ -31,3 +31,8 @@ TabTitleElement.args = {
     titlePrefix: "[",
     titleSuffix: <span>]</span>,
 };
+
+export const TabTitleSymbolElement = TemplateFull.bind({});
+TabTitleSymbolElement.args = {
+    text: "★",
+};

src/components/Tabs/tabs.scss

@@ -46,6 +46,12 @@ $tab-indicator-width: 3px !default;
             overflow-x: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
+            // Tab titles are user-configured and may contain Unicode symbols (e.g. "★") that fall outside
+            // the primary font stack. Browsers pick different system fallback fonts for such characters,
+            // causing glyphs to render at different optical sizes (smaller in Firefox).
+            // font-size-adjust normalises the fallback font size by matching the primary font's x-height,
+            // reducing the visual size discrepancy across browsers.
+            font-size-adjust: from-font;
 
             //min-width: 6em;
         }