Merge pull request #6925 from Sage/FE-6346

fix(tabs): tab headers jump in width when navigating through them
Sage · Sep 19, 2024 · 2d7521b · 2d7521b
2 parents b722fd5 + 8883359
commit 2d7521b
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/src/components/tabs/tabs.spec.tsx b/src/components/tabs/tabs.spec.tsx
@@ -250,7 +250,7 @@ describe("Tabs", () => {
     describe.each(["35%", "100px", "5em"])(
       "and value of %s is provided",
       (headerWidth) => {
-        it("should render correct `width` in `TabsHeader` component, and `Tab` `width` should be `auto`", () => {
+        it("should render correct `width` in `TabsHeader` component, and `Tab` `width` should be computed based on the headerWidth", () => {
           const wrapper = mount(
             <Tabs position="left" headerWidth={headerWidth}>
               <Tab title="Tab Title 1" tabId="uniqueid1">
@@ -271,7 +271,7 @@ describe("Tabs", () => {
 
           assertStyleMatch(
             {
-              width: "auto",
+              width: `calc(100% - ${headerWidth})`,
             },
             wrapper,
             {

diff --git a/src/components/tabs/tabs.style.ts b/src/components/tabs/tabs.style.ts
@@ -23,7 +23,7 @@ const StyledTabs = styled.div<StyledTabsProps>`
         }
 
         ${StyledTab} {
-          width: auto;
+          width: ${`calc(100% - ${headerWidth})`};
         }
       `}