Adds inline-size to horizontal tabs wrapper. (#1955)

iTwin · Mar 26, 2024 · 15013b7 · 15013b7
1 parent 0a071e9
commit 15013b7
Show file tree

Hide file tree

Showing 13 changed files with 15 additions and 20 deletions.
diff --git a/.changeset/great-news-beg.md b/.changeset/great-news-beg.md
@@ -0,0 +1,5 @@
+---
+"@itwin/itwinui-react": patch
+---
+
+Fixed a regression in `Tabs` where the panel content was not occupying the full width of the container.
diff --git a/.changeset/little-mugs-tap.md b/.changeset/little-mugs-tap.md
@@ -0,0 +1,5 @@
+---
+"@itwin/itwinui-css": patch
+---
+
+Fixed a regression in `iui-tabs` where the panel content was not occupying the full width of the container.
diff --git a/examples/Tabs.actions.css b/examples/Tabs.actions.css
diff --git a/examples/Tabs.actions.jsx b/examples/Tabs.actions.jsx
@@ -7,7 +7,7 @@ import { Tabs, Button } from '@itwin/itwinui-react';
 
 export default () => {
   return (
-    <Tabs.Wrapper className='demo-container'>
+    <Tabs.Wrapper>
       <Tabs.TabList>
         <Tabs.Tab value='apple' label='Apple' key='apple' />
         <Tabs.Tab value='orange' label='Orange' key='orange' />

diff --git a/examples/Tabs.borderless.css b/examples/Tabs.borderless.css
diff --git a/examples/Tabs.borderless.jsx b/examples/Tabs.borderless.jsx
@@ -7,7 +7,7 @@ import { Tabs } from '@itwin/itwinui-react';
 
 export default () => {
   return (
-    <Tabs.Wrapper type='borderless' className='demo-container'>
+    <Tabs.Wrapper type='borderless'>
       <Tabs.TabList>
         <Tabs.Tab value='apple' label='Apple' key='apple' />
         <Tabs.Tab value='orange' label='Orange' key='orange' />

diff --git a/examples/Tabs.controlled.css b/examples/Tabs.controlled.css
diff --git a/examples/Tabs.controlled.jsx b/examples/Tabs.controlled.jsx
@@ -13,7 +13,6 @@ export default () => {
       value={currentTabValue}
       onValueChange={(value) => setCurrentTabValue(value)}
       defaultValue='pear'
-      className='demo-container'
     >
       <Tabs.TabList>
         <Tabs.Tab value='apple' label='Apple' key='apple' />

diff --git a/examples/Tabs.main.css b/examples/Tabs.main.css
diff --git a/examples/Tabs.main.jsx b/examples/Tabs.main.jsx
@@ -7,7 +7,7 @@ import { Tabs } from '@itwin/itwinui-react';
 
 export default () => {
   return (
-    <Tabs.Wrapper className='demo-container'>
+    <Tabs.Wrapper>
       <Tabs.TabList>
         <Tabs.Tab value='apple' label='Apple' key='apple' />
         <Tabs.Tab value='orange' label='Orange' key='orange' />

diff --git a/examples/Tabs.pill.css b/examples/Tabs.pill.css
diff --git a/examples/Tabs.pill.jsx b/examples/Tabs.pill.jsx
@@ -7,7 +7,7 @@ import { Tabs } from '@itwin/itwinui-react';
 
 export default () => {
   return (
-    <Tabs.Wrapper type='pill' className='demo-container'>
+    <Tabs.Wrapper type='pill'>
       <Tabs.TabList>
         <Tabs.Tab value='apple' label='Apple' key='apple' />
         <Tabs.Tab value='orange' label='Orange' key='orange' />

diff --git a/packages/itwinui-css/src/tabs/base.scss b/packages/itwinui-css/src/tabs/base.scss
@@ -130,6 +130,7 @@ $borderless-horizontal-tab-min-height: calc(
   grid-template-columns: 1fr auto;
   grid-template-rows: auto 1fr;
   contain: inline-size;
+  inline-size: 100%;
 
   .iui-tabs {
     display: flex;