From b8dffdee3e976527c98ecef84aa2dffe8a12a193 Mon Sep 17 00:00:00 2001
From: michael barakat <mibaraka@microsoft.com>
Date: Mon, 3 Apr 2023 13:12:06 -0700
Subject: [PATCH] Adding max width on tab content

---
 packages/web-components/src/tab/tab.styles.ts    |  1 +
 packages/web-components/src/tabs/tabs.stories.ts | 16 ++++++++--------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/web-components/src/tab/tab.styles.ts b/packages/web-components/src/tab/tab.styles.ts
index a1eaf98f228bb4..0f547822488860 100644
--- a/packages/web-components/src/tab/tab.styles.ts
+++ b/packages/web-components/src/tab/tab.styles.ts
@@ -41,6 +41,7 @@ export const styles = css`
     display: inline-flex;
     flex-direction: column;
     padding: 0 2px;
+    max-width: 155px;
   }
 
   :host([aria-selected='true']) {
diff --git a/packages/web-components/src/tabs/tabs.stories.ts b/packages/web-components/src/tabs/tabs.stories.ts
index 76479f1e0dcca1..bd94d939ac18ed 100644
--- a/packages/web-components/src/tabs/tabs.stories.ts
+++ b/packages/web-components/src/tabs/tabs.stories.ts
@@ -21,10 +21,10 @@ const tabsDefault = html`
     size=${x => x.size}
     activeid=${x => x.activeid}
   >
-    <fluent-tab id=${tabIds[0]}> First Tab </fluent-tab>
-    <fluent-tab id=${tabIds[1]}> Second Tab</fluent-tab>
-    <fluent-tab id=${tabIds[2]}> Third Tab</fluent-tab>
-    <fluent-tab id=${tabIds[3]}> Fourth Tab</fluent-tab>
+    <fluent-tab id=${tabIds[0]}>First Tab </fluent-tab>
+    <fluent-tab id=${tabIds[1]}>Second Tab</fluent-tab>
+    <fluent-tab id=${tabIds[2]}>Third Tab</fluent-tab>
+    <fluent-tab id=${tabIds[3]}>Fourth Tab</fluent-tab>
 
     <fluent-tab-panel id=${tabIds[0] + '-panel'}>Tab One Content</fluent-tab-panel>
     <fluent-tab-panel id=${tabIds[1] + '-panel'}>Tab Two Content</fluent-tab-panel>
@@ -36,10 +36,10 @@ export const TabsDefault = renderComponent(tabsDefault).bind({});
 
 const tabsHorizontal = html`
   <fluent-tabs orientation="horizontal">
-    <fluent-tab> First Tab </fluent-tab>
-    <fluent-tab> Second Tab</fluent-tab>
-    <fluent-tab> Third Tab</fluent-tab>
-    <fluent-tab> Fourth Tab</fluent-tab>
+    <fluent-tab>First Tab </fluent-tab>
+    <fluent-tab>Second Tab</fluent-tab>
+    <fluent-tab>Third Tab</fluent-tab>
+    <fluent-tab>Fourth Tab</fluent-tab>
 
     <fluent-tab-panel></fluent-tab-panel>
     <fluent-tab-panel></fluent-tab-panel>