fix: vertical tabs from jumping (#20641)

* fix: tabpanel shifting in vertical layout * Change files
microsoft · Dec 1, 2021 · a69b283 · a69b283
1 parent 766416a
commit a69b283
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 2 deletions.
diff --git a/change/@fluentui-web-components-8052c655-9663-4c94-bc57-b4090f16ab2d.json 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": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git 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
@@ -81,6 +81,7 @@ export const tabsStyles: (
         position: relative;
         width: max-content;
         justify-self: end;
+        align-self: flex-start;
         width: 100%;
       }