From d5287d32c0d02e68a81a0aead0c0d15a995e0733 Mon Sep 17 00:00:00 2001
From: Mariia Kovsharova <mariia.kovsharova@eccenca.com>
Date: Fri, 20 Feb 2026 11:21:30 +0100
Subject: [PATCH 1/2] Displaying symbols as TabTitle content (CMEM-7208)

---
 CHANGELOG.md                                     | 2 ++
 src/components/Tabs/stories/TabTitle.stories.tsx | 9 +++++++--
 src/components/Tabs/tabs.scss                    | 6 ++++++
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9b550f94e..8c4081036 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/src/components/Tabs/stories/TabTitle.stories.tsx b/src/components/Tabs/stories/TabTitle.stories.tsx
index c4124754d..c9a502b0c 100644
--- a/src/components/Tabs/stories/TabTitle.stories.tsx
+++ b/src/components/Tabs/stories/TabTitle.stories.tsx
@@ -1,7 +1,7 @@
 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",
@@ -9,7 +9,7 @@ export default {
     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: "★",
+};
diff --git a/src/components/Tabs/tabs.scss b/src/components/Tabs/tabs.scss
index a47e32aa1..81dfdf8fa 100644
--- a/src/components/Tabs/tabs.scss
+++ b/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;
         }

From 4e46cfd37b7911bab0e751b9330d74632113c5ef Mon Sep 17 00:00:00 2001
From: Mariia Kovsharova <mariia.kovsharova@eccenca.com>
Date: Mon, 23 Feb 2026 12:12:45 +0100
Subject: [PATCH 2/2] Applied font-size-adjust property globally

---
 CHANGELOG.md                              | 4 ++--
 src/components/Tabs/tabs.scss             | 6 ------
 src/components/Typography/_reset.scss     | 1 +
 src/components/Typography/typography.scss | 5 +++++
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8c4081036..f61ca14a7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,8 +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
+-   `Typography`
+      -   adjust displaying fallback symbols in different browsers
 
 ### Changed
 
diff --git a/src/components/Tabs/tabs.scss b/src/components/Tabs/tabs.scss
index 81dfdf8fa..a47e32aa1 100644
--- a/src/components/Tabs/tabs.scss
+++ b/src/components/Tabs/tabs.scss
@@ -46,12 +46,6 @@ $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;
         }
diff --git a/src/components/Typography/_reset.scss b/src/components/Typography/_reset.scss
index a620cd2b8..c853b4020 100644
--- a/src/components/Typography/_reset.scss
+++ b/src/components/Typography/_reset.scss
@@ -7,6 +7,7 @@ select,
 input,
 textarea {
     font-family: inherit;
+    font-size-adjust: inherit;
     border-radius: 0;
 }
 
diff --git a/src/components/Typography/typography.scss b/src/components/Typography/typography.scss
index 87d20c595..d264df1c4 100644
--- a/src/components/Typography/typography.scss
+++ b/src/components/Typography/typography.scss
@@ -17,6 +17,11 @@ body {
     text-rendering: optimizelegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    // User-facing text 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;
 }
 
 code {