From b8258a7046fff99962a86d6e4b74e016278e3ac6 Mon Sep 17 00:00:00 2001
From: eljefe223 <jes@microsoft.com>
Date: Wed, 17 Nov 2021 14:08:39 -0800
Subject: [PATCH 1/2] fix: tabpanel shifting in vertical layout

---
 .../web-components/src/tabs/tabs.stories.ts   | 58 ++++++++++++++++++-
 .../web-components/src/tabs/tabs.styles.ts    |  1 +
 2 files changed, 57 insertions(+), 2 deletions(-)

diff --git a/packages/web-components/src/tabs/tabs.stories.ts b/packages/web-components/src/tabs/tabs.stories.ts
index 209bde056b23a..a2937206e974d 100644
--- a/packages/web-components/src/tabs/tabs.stories.ts
+++ b/packages/web-components/src/tabs/tabs.stories.ts
@@ -23,9 +23,63 @@ const TabsTemplate = ({ activeId, activeIndicator, orientation }) => `
   <fluent-tab id="TabOne">Tab one</fluent-tab>
   <fluent-tab id="TabTwo">Tab two</fluent-tab>
   <fluent-tab id="TabThree">Tab three</fluent-tab>
-  <fluent-tab-panel> Tab one content. This is for testing. </fluent-tab-panel>
+  <fluent-tab-panel>
+    Tab one content. This is for testing. Tab three content. This is for testing.
+    <br />
+    Tab one content. This is for testing.
+    <br />
+    Tab one content. This is for testing.
+    <br />
+    Tab one content. This is for testing.
+    <br />
+    Tab one content. This is for testing.
+    <br />
+    Tab one content. This is for testing.
+    <br />
+    Tab one content. This is for testing.
+    <br />
+    Tab one content. This is for testing.
+    <br />
+    Tab one content. This is for testing.
+    <br />
+    Tab one content. This is for testing.
+    <br />
+    Tab one content. This is for testing.
+    <br />
+    Tab one content. This is for testing.
+    <br />
+    Tab one content. This is for testing.
+    <br />
+  </fluent-tab-panel>
   <fluent-tab-panel> Tab two content. This is for testing. </fluent-tab-panel>
-  <fluent-tab-panel> Tab three content. This is for testing. </fluent-tab-panel>
+  <fluent-tab-panel>
+    Tab three content. This is for testing. Tab three content. This is for testing.
+    <br />
+    Tab three content. This is for testing.
+    <br />
+    Tab three content. This is for testing.
+    <br />
+    Tab three content. This is for testing.
+    <br />
+    Tab three content. This is for testing.
+    <br />
+    Tab three content. This is for testing.
+    <br />
+    Tab three content. This is for testing.
+    <br />
+    Tab three content. This is for testing.
+    <br />
+    Tab three content. This is for testing.
+    <br />
+    Tab three content. This is for testing.
+    <br />
+    Tab three content. This is for testing.
+    <br />
+    Tab three content. This is for testing.
+    <br />
+    Tab three content. This is for testing.
+    <br />
+  </fluent-tab-panel>
 </fluent-tabs>`;
 
 export const Tabs = TabsTemplate.bind({});
diff --git a/packages/web-components/src/tabs/tabs.styles.ts b/packages/web-components/src/tabs/tabs.styles.ts
index 638612204f1f2..f3cc1fe78477a 100644
--- a/packages/web-components/src/tabs/tabs.styles.ts
+++ b/packages/web-components/src/tabs/tabs.styles.ts
@@ -81,6 +81,7 @@ export const tabsStyles: (
         position: relative;
         width: max-content;
         justify-self: end;
+        align-self: flex-start;
         width: 100%;
       }
 

From 22be6a915bc9e37347c2e837622a8c3842bb080c Mon Sep 17 00:00:00 2001
From: eljefe223 <jes@microsoft.com>
Date: Wed, 17 Nov 2021 14:09:31 -0800
Subject: [PATCH 2/2] Change files

---
 ...eb-components-8052c655-9663-4c94-bc57-b4090f16ab2d.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-web-components-8052c655-9663-4c94-bc57-b4090f16ab2d.json

diff --git a/change/@fluentui-web-components-8052c655-9663-4c94-bc57-b4090f16ab2d.json b/change/@fluentui-web-components-8052c655-9663-4c94-bc57-b4090f16ab2d.json
new file mode 100644
index 0000000000000..a445967be290b
--- /dev/null
+++ b/change/@fluentui-web-components-8052c655-9663-4c94-bc57-b4090f16ab2d.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: tabpanel shifting in vertical layout",
+  "packageName": "@fluentui/web-components",
+  "email": "jes@microsoft.com",
+  "dependentChangeType": "patch"
+}