From 15013b7c18c793833247fdf5c56f7c9ccacdabf9 Mon Sep 17 00:00:00 2001
From: Ben Pusey <141063311+Ben-Pusey-Bentley@users.noreply.github.com>
Date: Tue, 26 Mar 2024 16:13:52 -0400
Subject: [PATCH] Adds inline-size to horizontal tabs wrapper. (#1955)

---
 .changeset/great-news-beg.md            | 5 +++++
 .changeset/little-mugs-tap.md           | 5 +++++
 examples/Tabs.actions.css               | 3 ---
 examples/Tabs.actions.jsx               | 2 +-
 examples/Tabs.borderless.css            | 3 ---
 examples/Tabs.borderless.jsx            | 2 +-
 examples/Tabs.controlled.css            | 3 ---
 examples/Tabs.controlled.jsx            | 1 -
 examples/Tabs.main.css                  | 3 ---
 examples/Tabs.main.jsx                  | 2 +-
 examples/Tabs.pill.css                  | 3 ---
 examples/Tabs.pill.jsx                  | 2 +-
 packages/itwinui-css/src/tabs/base.scss | 1 +
 13 files changed, 15 insertions(+), 20 deletions(-)
 create mode 100644 .changeset/great-news-beg.md
 create mode 100644 .changeset/little-mugs-tap.md
 delete mode 100644 examples/Tabs.actions.css
 delete mode 100644 examples/Tabs.borderless.css
 delete mode 100644 examples/Tabs.controlled.css
 delete mode 100644 examples/Tabs.main.css
 delete mode 100644 examples/Tabs.pill.css

diff --git a/.changeset/great-news-beg.md b/.changeset/great-news-beg.md
new file mode 100644
index 00000000000..e7deb69701e
--- /dev/null
+++ 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
new file mode 100644
index 00000000000..4e2f3769f3b
--- /dev/null
+++ 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
deleted file mode 100644
index 90000ed2d52..00000000000
--- a/examples/Tabs.actions.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.demo-container {
-  width: 100%;
-}
diff --git a/examples/Tabs.actions.jsx b/examples/Tabs.actions.jsx
index 6db5707ccc0..40ff22ee9a3 100644
--- 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
deleted file mode 100644
index 90000ed2d52..00000000000
--- a/examples/Tabs.borderless.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.demo-container {
-  width: 100%;
-}
diff --git a/examples/Tabs.borderless.jsx b/examples/Tabs.borderless.jsx
index b607c6ce49f..b518062f50f 100644
--- 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
deleted file mode 100644
index 90000ed2d52..00000000000
--- a/examples/Tabs.controlled.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.demo-container {
-  width: 100%;
-}
diff --git a/examples/Tabs.controlled.jsx b/examples/Tabs.controlled.jsx
index 0a307acae94..d55669535d3 100644
--- 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
deleted file mode 100644
index 90000ed2d52..00000000000
--- a/examples/Tabs.main.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.demo-container {
-  width: 100%;
-}
diff --git a/examples/Tabs.main.jsx b/examples/Tabs.main.jsx
index fe297c01b0b..7c196c6e717 100644
--- 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
deleted file mode 100644
index 90000ed2d52..00000000000
--- a/examples/Tabs.pill.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.demo-container {
-  width: 100%;
-}
diff --git a/examples/Tabs.pill.jsx b/examples/Tabs.pill.jsx
index 008b9a39395..c931e3fe1a6 100644
--- 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
index 5d1ad2fc909..87d31acc4d8 100644
--- 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;