From ad6b0cedbc06720b9e28d4523a0b45f8fc68ec95 Mon Sep 17 00:00:00 2001
From: Nathan Knowler <nathan@knowler.dev>
Date: Mon, 27 Jan 2025 16:09:28 -0600
Subject: [PATCH] Use an inline-size container for `<demo-box>` (#2415)

---
 apps/website/src/components/LiveExample.astro |  2 +
 examples/Alert.main.css                       |  2 +-
 .../Breadcrumbs.customOverflowDropdown.css    |  2 +-
 examples/Breadcrumbs.extremeTruncation.css    |  2 +-
 examples/Breadcrumbs.truncation.css           |  2 +-
 examples/ButtonGroup.overflow.css             |  2 +-
 examples/ButtonGroup.usage.css                |  2 +-
 examples/DropdownMenu.hidemiddleware.css      |  2 +-
 examples/ExpandableBlock.accordion.css        |  2 +-
 examples/ExpandableBlock.actions.css          |  2 +-
 examples/ExpandableBlock.borderless.css       |  2 +-
 examples/ExpandableBlock.disabled.css         |  2 +-
 examples/ExpandableBlock.form.css             |  2 +-
 examples/ExpandableBlock.main.css             |  2 +-
 examples/ExpandableBlock.small.css            |  2 +-
 examples/ExpandableBlock.status.css           |  2 +-
 examples/ExpandableBlock.withcaption.css      |  2 +-
 examples/Flex.spacer.css                      |  2 +-
 examples/Flex.wrap.css                        |  2 +-
 examples/ProgressLinear.label.css             |  2 +-
 examples/ProgressLinear.status.css            |  2 +-
 examples/RadioTile.color.css                  |  2 +-
 examples/RadioTile.main.css                   |  2 +-
 examples/SearchBox.basic.css                  |  2 +-
 examples/SearchBox.borderlessexpandbutton.css |  2 +-
 examples/SearchBox.custom.css                 |  2 +-
 examples/SearchBox.customopen.css             |  2 +-
 examples/SearchBox.expandable.css             |  2 +-
 examples/SearchBox.main.css                   |  2 +-
 examples/SearchBox.size.css                   |  2 +-
 examples/SearchBox.status.css                 |  2 +-
 examples/SkipToContentLink.main.css           |  2 +-
 examples/Slider.labels.css                    |  2 +-
 examples/Slider.main.css                      |  2 +-
 examples/Slider.range.css                     |  2 +-
 examples/Slider.rangemultiple.css             |  2 +-
 examples/Slider.thumbcustom.css               |  2 +-
 examples/Slider.tooltipcustom.css             |  2 +-
 examples/Slider.tooltipnone.css               |  2 +-
 examples/Stepper.customIcon.css               |  2 +-
 examples/Stepper.layout.css                   |  2 +-
 examples/Stepper.localization.css             |  2 +-
 examples/Stepper.long.css                     |  2 +-
 examples/Stepper.main.css                     |  2 +-
 examples/Stepper.short.css                    |  2 +-
 examples/Stepper.tooltip.css                  |  2 +-
 examples/Table.main.css                       |  2 +-
 examples/Tabs.actions.css                     |  3 ++
 examples/Tabs.actions.jsx                     | 52 +++++++++---------
 examples/Tabs.borderless.css                  |  3 ++
 examples/Tabs.borderless.jsx                  | 46 ++++++++--------
 examples/Tabs.controlled.css                  |  3 ++
 examples/Tabs.controlled.jsx                  | 54 ++++++++++---------
 examples/Tabs.main.css                        |  3 ++
 examples/Tabs.main.jsx                        | 46 ++++++++--------
 examples/Tabs.pill.css                        |  3 ++
 examples/Tabs.pill.jsx                        | 46 ++++++++--------
 examples/TagContainer.scroll.css              |  2 +-
 examples/TagContainer.truncate.css            |  2 +-
 examples/TagContainer.wrap.css                |  2 +-
 examples/Tree.customizeExpander.css           |  2 +-
 examples/Tree.expansion.css                   |  2 +-
 examples/Tree.main.css                        |  2 +-
 examples/Tree.selection.css                   |  2 +-
 examples/Tree.small.css                       |  2 +-
 examples/Tree.visibilityCheckbox.css          |  2 +-
 66 files changed, 199 insertions(+), 172 deletions(-)
 create mode 100644 examples/Tabs.actions.css
 create mode 100644 examples/Tabs.borderless.css
 create mode 100644 examples/Tabs.controlled.css
 create mode 100644 examples/Tabs.main.css
 create mode 100644 examples/Tabs.pill.css

diff --git a/apps/website/src/components/LiveExample.astro b/apps/website/src/components/LiveExample.astro
index 0c9e9299147..8674225652a 100644
--- a/apps/website/src/components/LiveExample.astro
+++ b/apps/website/src/components/LiveExample.astro
@@ -50,6 +50,7 @@ const cssCode = await (async () => {
     <style is:inline>
       astro-island {
         display: block !important; /* https://github.com/iTwin/iTwinUI/pull/2353 */
+        max-inline-size: 100cqi;
       }
     </style>
     <style set:html={cssCode}></style>
@@ -112,6 +113,7 @@ const cssCode = await (async () => {
 <style lang='scss'>
   @layer components {
     demo-box {
+      container-type: inline-size;
       position: relative;
       min-height: 300px;
       max-height: 500px;
diff --git a/examples/Alert.main.css b/examples/Alert.main.css
index 81997c15117..053723c633d 100644
--- a/examples/Alert.main.css
+++ b/examples/Alert.main.css
@@ -1,3 +1,3 @@
 .demo-alert-wrapper {
-  min-width: min(100%, 350px);
+  min-width: min(100cqi, 350px);
 }
diff --git a/examples/Breadcrumbs.customOverflowDropdown.css b/examples/Breadcrumbs.customOverflowDropdown.css
index 5c0a88af9e1..6663a858366 100644
--- a/examples/Breadcrumbs.customOverflowDropdown.css
+++ b/examples/Breadcrumbs.customOverflowDropdown.css
@@ -1,5 +1,5 @@
 .demo-container {
-  inline-size: 75%;
+  inline-size: 75cqi;
   min-inline-size: 150px;
   max-inline-size: 425px;
   border: 1px solid lightpink;
diff --git a/examples/Breadcrumbs.extremeTruncation.css b/examples/Breadcrumbs.extremeTruncation.css
index d394292bdb9..1954783d21d 100644
--- a/examples/Breadcrumbs.extremeTruncation.css
+++ b/examples/Breadcrumbs.extremeTruncation.css
@@ -1,5 +1,5 @@
 .demo-container {
-  inline-size: 75%;
+  inline-size: 75cqi;
   min-inline-size: 150px;
   max-inline-size: 425px;
   border: 1px solid pink;
diff --git a/examples/Breadcrumbs.truncation.css b/examples/Breadcrumbs.truncation.css
index 2714f095999..2026b2055b7 100644
--- a/examples/Breadcrumbs.truncation.css
+++ b/examples/Breadcrumbs.truncation.css
@@ -1,5 +1,5 @@
 .demo-container {
-  inline-size: 75%;
+  inline-size: 75cqi;
   min-inline-size: 150px;
   max-inline-size: 450px;
   border: 1px solid pink;
diff --git a/examples/ButtonGroup.overflow.css b/examples/ButtonGroup.overflow.css
index 723f94a48df..81cac8dbf6e 100644
--- a/examples/ButtonGroup.overflow.css
+++ b/examples/ButtonGroup.overflow.css
@@ -1,3 +1,3 @@
 .demo-container {
-  max-width: 70%;
+  max-width: 70cqi;
 }
diff --git a/examples/ButtonGroup.usage.css b/examples/ButtonGroup.usage.css
index 5891d9863f0..2c6156f6f75 100644
--- a/examples/ButtonGroup.usage.css
+++ b/examples/ButtonGroup.usage.css
@@ -1,5 +1,5 @@
 .demo-container {
-  width: 60%;
+  width: 60cqi;
   display: flex;
   gap: var(--iui-size-xs);
 }
diff --git a/examples/DropdownMenu.hidemiddleware.css b/examples/DropdownMenu.hidemiddleware.css
index e1878b09a25..45a9ada6be4 100644
--- a/examples/DropdownMenu.hidemiddleware.css
+++ b/examples/DropdownMenu.hidemiddleware.css
@@ -1,5 +1,5 @@
 .demo-container {
-  width: 50%;
+  width: 50cqi;
 }
 
 .list {
diff --git a/examples/ExpandableBlock.accordion.css b/examples/ExpandableBlock.accordion.css
index 71577e2c90b..c84815d529b 100644
--- a/examples/ExpandableBlock.accordion.css
+++ b/examples/ExpandableBlock.accordion.css
@@ -1,3 +1,3 @@
 .demo-container {
-  width: min(100%, 300px);
+  width: min(100cqi, 300px);
 }
diff --git a/examples/ExpandableBlock.actions.css b/examples/ExpandableBlock.actions.css
index 71577e2c90b..c84815d529b 100644
--- a/examples/ExpandableBlock.actions.css
+++ b/examples/ExpandableBlock.actions.css
@@ -1,3 +1,3 @@
 .demo-container {
-  width: min(100%, 300px);
+  width: min(100cqi, 300px);
 }
diff --git a/examples/ExpandableBlock.borderless.css b/examples/ExpandableBlock.borderless.css
index 71577e2c90b..c84815d529b 100644
--- a/examples/ExpandableBlock.borderless.css
+++ b/examples/ExpandableBlock.borderless.css
@@ -1,3 +1,3 @@
 .demo-container {
-  width: min(100%, 300px);
+  width: min(100cqi, 300px);
 }
diff --git a/examples/ExpandableBlock.disabled.css b/examples/ExpandableBlock.disabled.css
index 71577e2c90b..c84815d529b 100644
--- a/examples/ExpandableBlock.disabled.css
+++ b/examples/ExpandableBlock.disabled.css
@@ -1,3 +1,3 @@
 .demo-container {
-  width: min(100%, 300px);
+  width: min(100cqi, 300px);
 }
diff --git a/examples/ExpandableBlock.form.css b/examples/ExpandableBlock.form.css
index 71577e2c90b..c84815d529b 100644
--- a/examples/ExpandableBlock.form.css
+++ b/examples/ExpandableBlock.form.css
@@ -1,3 +1,3 @@
 .demo-container {
-  width: min(100%, 300px);
+  width: min(100cqi, 300px);
 }
diff --git a/examples/ExpandableBlock.main.css b/examples/ExpandableBlock.main.css
index 71577e2c90b..c84815d529b 100644
--- a/examples/ExpandableBlock.main.css
+++ b/examples/ExpandableBlock.main.css
@@ -1,3 +1,3 @@
 .demo-container {
-  width: min(100%, 300px);
+  width: min(100cqi, 300px);
 }
diff --git a/examples/ExpandableBlock.small.css b/examples/ExpandableBlock.small.css
index 71577e2c90b..c84815d529b 100644
--- a/examples/ExpandableBlock.small.css
+++ b/examples/ExpandableBlock.small.css
@@ -1,3 +1,3 @@
 .demo-container {
-  width: min(100%, 300px);
+  width: min(100cqi, 300px);
 }
diff --git a/examples/ExpandableBlock.status.css b/examples/ExpandableBlock.status.css
index 71577e2c90b..c84815d529b 100644
--- a/examples/ExpandableBlock.status.css
+++ b/examples/ExpandableBlock.status.css
@@ -1,3 +1,3 @@
 .demo-container {
-  width: min(100%, 300px);
+  width: min(100cqi, 300px);
 }
diff --git a/examples/ExpandableBlock.withcaption.css b/examples/ExpandableBlock.withcaption.css
index 71577e2c90b..c84815d529b 100644
--- a/examples/ExpandableBlock.withcaption.css
+++ b/examples/ExpandableBlock.withcaption.css
@@ -1,3 +1,3 @@
 .demo-container {
-  width: min(100%, 300px);
+  width: min(100cqi, 300px);
 }
diff --git a/examples/Flex.spacer.css b/examples/Flex.spacer.css
index 9fbc963a149..72932875ae3 100644
--- a/examples/Flex.spacer.css
+++ b/examples/Flex.spacer.css
@@ -4,5 +4,5 @@
 }
 
 .demo-container {
-  width: 100%;
+  width: 100cqi;
 }
diff --git a/examples/Flex.wrap.css b/examples/Flex.wrap.css
index 3b41bb8ccda..851eff2ef24 100644
--- a/examples/Flex.wrap.css
+++ b/examples/Flex.wrap.css
@@ -4,5 +4,5 @@
 }
 
 .demo-container {
-  width: 30%;
+  width: 30cqi;
 }
diff --git a/examples/ProgressLinear.label.css b/examples/ProgressLinear.label.css
index 8cc0a04ee6d..c84714b7cc2 100644
--- a/examples/ProgressLinear.label.css
+++ b/examples/ProgressLinear.label.css
@@ -2,5 +2,5 @@
   display: flex;
   flex-direction: column;
   gap: var(--iui-size-s);
-  width: min(100%, 200px);
+  width: min(100cqi, 200px);
 }
diff --git a/examples/ProgressLinear.status.css b/examples/ProgressLinear.status.css
index 8cc0a04ee6d..c84714b7cc2 100644
--- a/examples/ProgressLinear.status.css
+++ b/examples/ProgressLinear.status.css
@@ -2,5 +2,5 @@
   display: flex;
   flex-direction: column;
   gap: var(--iui-size-s);
-  width: min(100%, 200px);
+  width: min(100cqi, 200px);
 }
diff --git a/examples/RadioTile.color.css b/examples/RadioTile.color.css
index 710d5aa1428..9144d5dba02 100644
--- a/examples/RadioTile.color.css
+++ b/examples/RadioTile.color.css
@@ -1,3 +1,3 @@
 .demo-radio-tile-group {
-  width: min(100%, 350px);
+  width: min(100cqi, 350px);
 }
diff --git a/examples/RadioTile.main.css b/examples/RadioTile.main.css
index 710d5aa1428..9144d5dba02 100644
--- a/examples/RadioTile.main.css
+++ b/examples/RadioTile.main.css
@@ -1,3 +1,3 @@
 .demo-radio-tile-group {
-  width: min(100%, 350px);
+  width: min(100cqi, 350px);
 }
diff --git a/examples/SearchBox.basic.css b/examples/SearchBox.basic.css
index 44e77832492..e9168115154 100644
--- a/examples/SearchBox.basic.css
+++ b/examples/SearchBox.basic.css
@@ -1,5 +1,5 @@
 .demo-container {
-  width: 70%;
+  width: 70cqi;
   display: flex;
   gap: var(--iui-size-xs);
 }
diff --git a/examples/SearchBox.borderlessexpandbutton.css b/examples/SearchBox.borderlessexpandbutton.css
index b4ba7bbe283..eeb1a1585c2 100644
--- a/examples/SearchBox.borderlessexpandbutton.css
+++ b/examples/SearchBox.borderlessexpandbutton.css
@@ -1,5 +1,5 @@
 .demo-container {
-  width: 70%;
+  width: 70cqi;
   display: flex;
   justify-content: center;
   gap: var(--iui-size-xs);
diff --git a/examples/SearchBox.custom.css b/examples/SearchBox.custom.css
index b4ba7bbe283..eeb1a1585c2 100644
--- a/examples/SearchBox.custom.css
+++ b/examples/SearchBox.custom.css
@@ -1,5 +1,5 @@
 .demo-container {
-  width: 70%;
+  width: 70cqi;
   display: flex;
   justify-content: center;
   gap: var(--iui-size-xs);
diff --git a/examples/SearchBox.customopen.css b/examples/SearchBox.customopen.css
index 8a33d73a9b8..f485c5ca9ab 100644
--- a/examples/SearchBox.customopen.css
+++ b/examples/SearchBox.customopen.css
@@ -1,5 +1,5 @@
 .demo-container {
-  width: 70%;
+  width: 70cqi;
   display: flex;
   justify-content: center;
   gap: var(--iui-size-xs);
diff --git a/examples/SearchBox.expandable.css b/examples/SearchBox.expandable.css
index b4ba7bbe283..eeb1a1585c2 100644
--- a/examples/SearchBox.expandable.css
+++ b/examples/SearchBox.expandable.css
@@ -1,5 +1,5 @@
 .demo-container {
-  width: 70%;
+  width: 70cqi;
   display: flex;
   justify-content: center;
   gap: var(--iui-size-xs);
diff --git a/examples/SearchBox.main.css b/examples/SearchBox.main.css
index 44e77832492..e9168115154 100644
--- a/examples/SearchBox.main.css
+++ b/examples/SearchBox.main.css
@@ -1,5 +1,5 @@
 .demo-container {
-  width: 70%;
+  width: 70cqi;
   display: flex;
   gap: var(--iui-size-xs);
 }
diff --git a/examples/SearchBox.size.css b/examples/SearchBox.size.css
index 08b0e9f5589..59bfdecf5f4 100644
--- a/examples/SearchBox.size.css
+++ b/examples/SearchBox.size.css
@@ -1,5 +1,5 @@
 .demo-container {
-  width: 70%;
+  width: 70cqi;
   display: flex;
   flex-direction: column;
   gap: var(--iui-size-xs);
diff --git a/examples/SearchBox.status.css b/examples/SearchBox.status.css
index 08b0e9f5589..59bfdecf5f4 100644
--- a/examples/SearchBox.status.css
+++ b/examples/SearchBox.status.css
@@ -1,5 +1,5 @@
 .demo-container {
-  width: 70%;
+  width: 70cqi;
   display: flex;
   flex-direction: column;
   gap: var(--iui-size-xs);
diff --git a/examples/SkipToContentLink.main.css b/examples/SkipToContentLink.main.css
index 47d046ace69..7e1eb1f6ef8 100644
--- a/examples/SkipToContentLink.main.css
+++ b/examples/SkipToContentLink.main.css
@@ -3,6 +3,6 @@
   align-items: center;
   justify-content: center;
   min-height: 300px;
-  width: 100%;
+  width: 100cqi;
   transform: translateX(0); /* creates containing block for position: fixed */
 }
diff --git a/examples/Slider.labels.css b/examples/Slider.labels.css
index 1f21f5b4123..8c90ae57220 100644
--- a/examples/Slider.labels.css
+++ b/examples/Slider.labels.css
@@ -1,3 +1,3 @@
 .demo-input-grid {
-  width: min(100%, 300px);
+  width: min(100cqi, 300px);
 }
diff --git a/examples/Slider.main.css b/examples/Slider.main.css
index 1f21f5b4123..8c90ae57220 100644
--- a/examples/Slider.main.css
+++ b/examples/Slider.main.css
@@ -1,3 +1,3 @@
 .demo-input-grid {
-  width: min(100%, 300px);
+  width: min(100cqi, 300px);
 }
diff --git a/examples/Slider.range.css b/examples/Slider.range.css
index 1f21f5b4123..8c90ae57220 100644
--- a/examples/Slider.range.css
+++ b/examples/Slider.range.css
@@ -1,3 +1,3 @@
 .demo-input-grid {
-  width: min(100%, 300px);
+  width: min(100cqi, 300px);
 }
diff --git a/examples/Slider.rangemultiple.css b/examples/Slider.rangemultiple.css
index 1f21f5b4123..8c90ae57220 100644
--- a/examples/Slider.rangemultiple.css
+++ b/examples/Slider.rangemultiple.css
@@ -1,3 +1,3 @@
 .demo-input-grid {
-  width: min(100%, 300px);
+  width: min(100cqi, 300px);
 }
diff --git a/examples/Slider.thumbcustom.css b/examples/Slider.thumbcustom.css
index 0dd139a08d2..a0b4e260ef4 100644
--- a/examples/Slider.thumbcustom.css
+++ b/examples/Slider.thumbcustom.css
@@ -1,5 +1,5 @@
 .demo-container {
-  width: min(100%, 300px);
+  width: min(100cqi, 300px);
 }
 
 .demo-thumb {
diff --git a/examples/Slider.tooltipcustom.css b/examples/Slider.tooltipcustom.css
index 1f21f5b4123..8c90ae57220 100644
--- a/examples/Slider.tooltipcustom.css
+++ b/examples/Slider.tooltipcustom.css
@@ -1,3 +1,3 @@
 .demo-input-grid {
-  width: min(100%, 300px);
+  width: min(100cqi, 300px);
 }
diff --git a/examples/Slider.tooltipnone.css b/examples/Slider.tooltipnone.css
index 06df56113e1..bd4d1113757 100644
--- a/examples/Slider.tooltipnone.css
+++ b/examples/Slider.tooltipnone.css
@@ -1,5 +1,5 @@
 .demo-input-grid {
-  width: min(100%, 300px);
+  width: min(100cqi, 300px);
 }
 
 .demo-text {
diff --git a/examples/Stepper.customIcon.css b/examples/Stepper.customIcon.css
index 5add2d2720b..19ff285c232 100644
--- a/examples/Stepper.customIcon.css
+++ b/examples/Stepper.customIcon.css
@@ -1,5 +1,5 @@
 .demo-container {
-  min-width: min(100%, 400px);
+  min-width: min(100cqi, 400px);
   display: flex;
   flex-direction: column;
   gap: var(--iui-size-m);
diff --git a/examples/Stepper.layout.css b/examples/Stepper.layout.css
index fee7d9eec4d..5c6bb35f89e 100644
--- a/examples/Stepper.layout.css
+++ b/examples/Stepper.layout.css
@@ -1,5 +1,5 @@
 .demo-container {
-  min-width: min(100%, 400px);
+  min-width: min(100cqi, 400px);
   display: flex;
   flex-direction: column;
   gap: var(--iui-size-m);
diff --git a/examples/Stepper.localization.css b/examples/Stepper.localization.css
index 5add2d2720b..19ff285c232 100644
--- a/examples/Stepper.localization.css
+++ b/examples/Stepper.localization.css
@@ -1,5 +1,5 @@
 .demo-container {
-  min-width: min(100%, 400px);
+  min-width: min(100cqi, 400px);
   display: flex;
   flex-direction: column;
   gap: var(--iui-size-m);
diff --git a/examples/Stepper.long.css b/examples/Stepper.long.css
index 5add2d2720b..19ff285c232 100644
--- a/examples/Stepper.long.css
+++ b/examples/Stepper.long.css
@@ -1,5 +1,5 @@
 .demo-container {
-  min-width: min(100%, 400px);
+  min-width: min(100cqi, 400px);
   display: flex;
   flex-direction: column;
   gap: var(--iui-size-m);
diff --git a/examples/Stepper.main.css b/examples/Stepper.main.css
index 5add2d2720b..19ff285c232 100644
--- a/examples/Stepper.main.css
+++ b/examples/Stepper.main.css
@@ -1,5 +1,5 @@
 .demo-container {
-  min-width: min(100%, 400px);
+  min-width: min(100cqi, 400px);
   display: flex;
   flex-direction: column;
   gap: var(--iui-size-m);
diff --git a/examples/Stepper.short.css b/examples/Stepper.short.css
index 5add2d2720b..19ff285c232 100644
--- a/examples/Stepper.short.css
+++ b/examples/Stepper.short.css
@@ -1,5 +1,5 @@
 .demo-container {
-  min-width: min(100%, 400px);
+  min-width: min(100cqi, 400px);
   display: flex;
   flex-direction: column;
   gap: var(--iui-size-m);
diff --git a/examples/Stepper.tooltip.css b/examples/Stepper.tooltip.css
index 5add2d2720b..19ff285c232 100644
--- a/examples/Stepper.tooltip.css
+++ b/examples/Stepper.tooltip.css
@@ -1,5 +1,5 @@
 .demo-container {
-  min-width: min(100%, 400px);
+  min-width: min(100cqi, 400px);
   display: flex;
   flex-direction: column;
   gap: var(--iui-size-m);
diff --git a/examples/Table.main.css b/examples/Table.main.css
index ed47216eb69..0dd6875100f 100644
--- a/examples/Table.main.css
+++ b/examples/Table.main.css
@@ -1,3 +1,3 @@
 .demo-container {
-  min-width: min(100%, 350px);
+  min-width: min(100cqi, 350px);
 }
diff --git a/examples/Tabs.actions.css b/examples/Tabs.actions.css
new file mode 100644
index 00000000000..354a192ef0f
--- /dev/null
+++ b/examples/Tabs.actions.css
@@ -0,0 +1,3 @@
+.demo-container {
+  inline-size: min(100cqi, 400px);
+}
diff --git a/examples/Tabs.actions.jsx b/examples/Tabs.actions.jsx
index 40ff22ee9a3..e3f562fc61f 100644
--- a/examples/Tabs.actions.jsx
+++ b/examples/Tabs.actions.jsx
@@ -7,32 +7,34 @@ import { Tabs, Button } from '@itwin/itwinui-react';
 
 export default () => {
   return (
-    <Tabs.Wrapper>
-      <Tabs.TabList>
-        <Tabs.Tab value='apple' label='Apple' key='apple' />
-        <Tabs.Tab value='orange' label='Orange' key='orange' />
-        <Tabs.Tab value='pear' label='Pear' key='pear' />
-      </Tabs.TabList>
+    <div className='demo-container'>
+      <Tabs.Wrapper>
+        <Tabs.TabList>
+          <Tabs.Tab value='apple' label='Apple' key='apple' />
+          <Tabs.Tab value='orange' label='Orange' key='orange' />
+          <Tabs.Tab value='pear' label='Pear' key='pear' />
+        </Tabs.TabList>
 
-      <Tabs.Actions>
-        <Button size='small'>My action</Button>
-      </Tabs.Actions>
+        <Tabs.Actions>
+          <Button size='small'>My action</Button>
+        </Tabs.Actions>
 
-      <Tabs.Panel value='apple' key='apple'>
-        An apple is a round, edible fruit produced by an apple tree (Malus
-        domestica). Apple trees are cultivated worldwide and are the most widely
-        grown species in the genus Malus.
-      </Tabs.Panel>
-      <Tabs.Panel value='orange' key='orange'>
-        An orange is a fruit of various citrus species in the family Rutaceae
-        (see list of plants known as orange); it primarily refers to Citrus x
-        sinensis, which is also called sweet orange, to distinguish it from the
-        related Citrus x aurantium, referred to as bitter orange.
-      </Tabs.Panel>
-      <Tabs.Panel value='pear' key='pear'>
-        Pears are fruits produced and consumed around the world, growing on a
-        tree and harvested in late summer into mid-autumn.
-      </Tabs.Panel>
-    </Tabs.Wrapper>
+        <Tabs.Panel value='apple' key='apple'>
+          An apple is a round, edible fruit produced by an apple tree (Malus
+          domestica). Apple trees are cultivated worldwide and are the most
+          widely grown species in the genus Malus.
+        </Tabs.Panel>
+        <Tabs.Panel value='orange' key='orange'>
+          An orange is a fruit of various citrus species in the family Rutaceae
+          (see list of plants known as orange); it primarily refers to Citrus x
+          sinensis, which is also called sweet orange, to distinguish it from
+          the related Citrus x aurantium, referred to as bitter orange.
+        </Tabs.Panel>
+        <Tabs.Panel value='pear' key='pear'>
+          Pears are fruits produced and consumed around the world, growing on a
+          tree and harvested in late summer into mid-autumn.
+        </Tabs.Panel>
+      </Tabs.Wrapper>
+    </div>
   );
 };
diff --git a/examples/Tabs.borderless.css b/examples/Tabs.borderless.css
new file mode 100644
index 00000000000..354a192ef0f
--- /dev/null
+++ b/examples/Tabs.borderless.css
@@ -0,0 +1,3 @@
+.demo-container {
+  inline-size: min(100cqi, 400px);
+}
diff --git a/examples/Tabs.borderless.jsx b/examples/Tabs.borderless.jsx
index b518062f50f..5f7e1ec8465 100644
--- a/examples/Tabs.borderless.jsx
+++ b/examples/Tabs.borderless.jsx
@@ -7,28 +7,30 @@ import { Tabs } from '@itwin/itwinui-react';
 
 export default () => {
   return (
-    <Tabs.Wrapper type='borderless'>
-      <Tabs.TabList>
-        <Tabs.Tab value='apple' label='Apple' key='apple' />
-        <Tabs.Tab value='orange' label='Orange' key='orange' />
-        <Tabs.Tab value='pear' label='Pear' key='pear' />
-      </Tabs.TabList>
+    <div 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' />
+          <Tabs.Tab value='pear' label='Pear' key='pear' />
+        </Tabs.TabList>
 
-      <Tabs.Panel value='apple' key='apple'>
-        An apple is a round, edible fruit produced by an apple tree (Malus
-        domestica). Apple trees are cultivated worldwide and are the most widely
-        grown species in the genus Malus.
-      </Tabs.Panel>
-      <Tabs.Panel value='orange' key='orange'>
-        An orange is a fruit of various citrus species in the family Rutaceae
-        (see list of plants known as orange); it primarily refers to Citrus x
-        sinensis, which is also called sweet orange, to distinguish it from the
-        related Citrus x aurantium, referred to as bitter orange.
-      </Tabs.Panel>
-      <Tabs.Panel value='pear' key='pear'>
-        Pears are fruits produced and consumed around the world, growing on a
-        tree and harvested in late summer into mid-autumn.
-      </Tabs.Panel>
-    </Tabs.Wrapper>
+        <Tabs.Panel value='apple' key='apple'>
+          An apple is a round, edible fruit produced by an apple tree (Malus
+          domestica). Apple trees are cultivated worldwide and are the most
+          widely grown species in the genus Malus.
+        </Tabs.Panel>
+        <Tabs.Panel value='orange' key='orange'>
+          An orange is a fruit of various citrus species in the family Rutaceae
+          (see list of plants known as orange); it primarily refers to Citrus x
+          sinensis, which is also called sweet orange, to distinguish it from
+          the related Citrus x aurantium, referred to as bitter orange.
+        </Tabs.Panel>
+        <Tabs.Panel value='pear' key='pear'>
+          Pears are fruits produced and consumed around the world, growing on a
+          tree and harvested in late summer into mid-autumn.
+        </Tabs.Panel>
+      </Tabs.Wrapper>
+    </div>
   );
 };
diff --git a/examples/Tabs.controlled.css b/examples/Tabs.controlled.css
new file mode 100644
index 00000000000..354a192ef0f
--- /dev/null
+++ b/examples/Tabs.controlled.css
@@ -0,0 +1,3 @@
+.demo-container {
+  inline-size: min(100cqi, 400px);
+}
diff --git a/examples/Tabs.controlled.jsx b/examples/Tabs.controlled.jsx
index d55669535d3..0e3037e1f65 100644
--- a/examples/Tabs.controlled.jsx
+++ b/examples/Tabs.controlled.jsx
@@ -9,32 +9,34 @@ export default () => {
   const [currentTabValue, setCurrentTabValue] = React.useState();
 
   return (
-    <Tabs.Wrapper
-      value={currentTabValue}
-      onValueChange={(value) => setCurrentTabValue(value)}
-      defaultValue='pear'
-    >
-      <Tabs.TabList>
-        <Tabs.Tab value='apple' label='Apple' key='apple' />
-        <Tabs.Tab value='orange' label='Orange' key='orange' />
-        <Tabs.Tab value='pear' label='Pear' key='pear' />
-      </Tabs.TabList>
+    <div className='demo-container'>
+      <Tabs.Wrapper
+        value={currentTabValue}
+        onValueChange={(value) => setCurrentTabValue(value)}
+        defaultValue='pear'
+      >
+        <Tabs.TabList>
+          <Tabs.Tab value='apple' label='Apple' key='apple' />
+          <Tabs.Tab value='orange' label='Orange' key='orange' />
+          <Tabs.Tab value='pear' label='Pear' key='pear' />
+        </Tabs.TabList>
 
-      <Tabs.Panel value='apple' key='apple'>
-        An apple is a round, edible fruit produced by an apple tree (Malus
-        domestica). Apple trees are cultivated worldwide and are the most widely
-        grown species in the genus Malus.
-      </Tabs.Panel>
-      <Tabs.Panel value='orange' key='orange'>
-        An orange is a fruit of various citrus species in the family Rutaceae
-        (see list of plants known as orange); it primarily refers to Citrus x
-        sinensis, which is also called sweet orange, to distinguish it from the
-        related Citrus x aurantium, referred to as bitter orange.
-      </Tabs.Panel>
-      <Tabs.Panel value='pear' key='pear'>
-        Pears are fruits produced and consumed around the world, growing on a
-        tree and harvested in late summer into mid-autumn.
-      </Tabs.Panel>
-    </Tabs.Wrapper>
+        <Tabs.Panel value='apple' key='apple'>
+          An apple is a round, edible fruit produced by an apple tree (Malus
+          domestica). Apple trees are cultivated worldwide and are the most
+          widely grown species in the genus Malus.
+        </Tabs.Panel>
+        <Tabs.Panel value='orange' key='orange'>
+          An orange is a fruit of various citrus species in the family Rutaceae
+          (see list of plants known as orange); it primarily refers to Citrus x
+          sinensis, which is also called sweet orange, to distinguish it from
+          the related Citrus x aurantium, referred to as bitter orange.
+        </Tabs.Panel>
+        <Tabs.Panel value='pear' key='pear'>
+          Pears are fruits produced and consumed around the world, growing on a
+          tree and harvested in late summer into mid-autumn.
+        </Tabs.Panel>
+      </Tabs.Wrapper>
+    </div>
   );
 };
diff --git a/examples/Tabs.main.css b/examples/Tabs.main.css
new file mode 100644
index 00000000000..354a192ef0f
--- /dev/null
+++ b/examples/Tabs.main.css
@@ -0,0 +1,3 @@
+.demo-container {
+  inline-size: min(100cqi, 400px);
+}
diff --git a/examples/Tabs.main.jsx b/examples/Tabs.main.jsx
index 7c196c6e717..09e3c35d5ea 100644
--- a/examples/Tabs.main.jsx
+++ b/examples/Tabs.main.jsx
@@ -7,28 +7,30 @@ import { Tabs } from '@itwin/itwinui-react';
 
 export default () => {
   return (
-    <Tabs.Wrapper>
-      <Tabs.TabList>
-        <Tabs.Tab value='apple' label='Apple' key='apple' />
-        <Tabs.Tab value='orange' label='Orange' key='orange' />
-        <Tabs.Tab value='pear' label='Pear' key='pear' />
-      </Tabs.TabList>
+    <div className='demo-container'>
+      <Tabs.Wrapper>
+        <Tabs.TabList>
+          <Tabs.Tab value='apple' label='Apple' key='apple' />
+          <Tabs.Tab value='orange' label='Orange' key='orange' />
+          <Tabs.Tab value='pear' label='Pear' key='pear' />
+        </Tabs.TabList>
 
-      <Tabs.Panel value='apple' key='apple'>
-        An apple is a round, edible fruit produced by an apple tree (Malus
-        domestica). Apple trees are cultivated worldwide and are the most widely
-        grown species in the genus Malus.
-      </Tabs.Panel>
-      <Tabs.Panel value='orange' key='orange'>
-        An orange is a fruit of various citrus species in the family Rutaceae
-        (see list of plants known as orange); it primarily refers to Citrus x
-        sinensis, which is also called sweet orange, to distinguish it from the
-        related Citrus x aurantium, referred to as bitter orange.
-      </Tabs.Panel>
-      <Tabs.Panel value='pear' key='pear'>
-        Pears are fruits produced and consumed around the world, growing on a
-        tree and harvested in late summer into mid-autumn.
-      </Tabs.Panel>
-    </Tabs.Wrapper>
+        <Tabs.Panel value='apple' key='apple'>
+          An apple is a round, edible fruit produced by an apple tree (Malus
+          domestica). Apple trees are cultivated worldwide and are the most
+          widely grown species in the genus Malus.
+        </Tabs.Panel>
+        <Tabs.Panel value='orange' key='orange'>
+          An orange is a fruit of various citrus species in the family Rutaceae
+          (see list of plants known as orange); it primarily refers to Citrus x
+          sinensis, which is also called sweet orange, to distinguish it from
+          the related Citrus x aurantium, referred to as bitter orange.
+        </Tabs.Panel>
+        <Tabs.Panel value='pear' key='pear'>
+          Pears are fruits produced and consumed around the world, growing on a
+          tree and harvested in late summer into mid-autumn.
+        </Tabs.Panel>
+      </Tabs.Wrapper>
+    </div>
   );
 };
diff --git a/examples/Tabs.pill.css b/examples/Tabs.pill.css
new file mode 100644
index 00000000000..354a192ef0f
--- /dev/null
+++ b/examples/Tabs.pill.css
@@ -0,0 +1,3 @@
+.demo-container {
+  inline-size: min(100cqi, 400px);
+}
diff --git a/examples/Tabs.pill.jsx b/examples/Tabs.pill.jsx
index c931e3fe1a6..6b25c5dd074 100644
--- a/examples/Tabs.pill.jsx
+++ b/examples/Tabs.pill.jsx
@@ -7,28 +7,30 @@ import { Tabs } from '@itwin/itwinui-react';
 
 export default () => {
   return (
-    <Tabs.Wrapper type='pill'>
-      <Tabs.TabList>
-        <Tabs.Tab value='apple' label='Apple' key='apple' />
-        <Tabs.Tab value='orange' label='Orange' key='orange' />
-        <Tabs.Tab value='pear' label='Pear' key='pear' />
-      </Tabs.TabList>
+    <div 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' />
+          <Tabs.Tab value='pear' label='Pear' key='pear' />
+        </Tabs.TabList>
 
-      <Tabs.Panel value='apple' key='apple'>
-        An apple is a round, edible fruit produced by an apple tree (Malus
-        domestica). Apple trees are cultivated worldwide and are the most widely
-        grown species in the genus Malus.
-      </Tabs.Panel>
-      <Tabs.Panel value='orange' key='orange'>
-        An orange is a fruit of various citrus species in the family Rutaceae
-        (see list of plants known as orange); it primarily refers to Citrus x
-        sinensis, which is also called sweet orange, to distinguish it from the
-        related Citrus x aurantium, referred to as bitter orange.
-      </Tabs.Panel>
-      <Tabs.Panel value='pear' key='pear'>
-        Pears are fruits produced and consumed around the world, growing on a
-        tree and harvested in late summer into mid-autumn.
-      </Tabs.Panel>
-    </Tabs.Wrapper>
+        <Tabs.Panel value='apple' key='apple'>
+          An apple is a round, edible fruit produced by an apple tree (Malus
+          domestica). Apple trees are cultivated worldwide and are the most
+          widely grown species in the genus Malus.
+        </Tabs.Panel>
+        <Tabs.Panel value='orange' key='orange'>
+          An orange is a fruit of various citrus species in the family Rutaceae
+          (see list of plants known as orange); it primarily refers to Citrus x
+          sinensis, which is also called sweet orange, to distinguish it from
+          the related Citrus x aurantium, referred to as bitter orange.
+        </Tabs.Panel>
+        <Tabs.Panel value='pear' key='pear'>
+          Pears are fruits produced and consumed around the world, growing on a
+          tree and harvested in late summer into mid-autumn.
+        </Tabs.Panel>
+      </Tabs.Wrapper>
+    </div>
   );
 };
diff --git a/examples/TagContainer.scroll.css b/examples/TagContainer.scroll.css
index 723f94a48df..81cac8dbf6e 100644
--- a/examples/TagContainer.scroll.css
+++ b/examples/TagContainer.scroll.css
@@ -1,3 +1,3 @@
 .demo-container {
-  max-width: 70%;
+  max-width: 70cqi;
 }
diff --git a/examples/TagContainer.truncate.css b/examples/TagContainer.truncate.css
index 723f94a48df..81cac8dbf6e 100644
--- a/examples/TagContainer.truncate.css
+++ b/examples/TagContainer.truncate.css
@@ -1,3 +1,3 @@
 .demo-container {
-  max-width: 70%;
+  max-width: 70cqi;
 }
diff --git a/examples/TagContainer.wrap.css b/examples/TagContainer.wrap.css
index 24a189a25a3..4a9d135753b 100644
--- a/examples/TagContainer.wrap.css
+++ b/examples/TagContainer.wrap.css
@@ -1,3 +1,3 @@
 .demo-container {
-  max-width: 60%;
+  max-width: 60cqi;
 }
diff --git a/examples/Tree.customizeExpander.css b/examples/Tree.customizeExpander.css
index 174530fae42..0f738607a4e 100644
--- a/examples/Tree.customizeExpander.css
+++ b/examples/Tree.customizeExpander.css
@@ -1,3 +1,3 @@
 .demo-tree {
-  width: min(100%, 260px);
+  width: min(100cqi, 260px);
 }
diff --git a/examples/Tree.expansion.css b/examples/Tree.expansion.css
index 174530fae42..0f738607a4e 100644
--- a/examples/Tree.expansion.css
+++ b/examples/Tree.expansion.css
@@ -1,3 +1,3 @@
 .demo-tree {
-  width: min(100%, 260px);
+  width: min(100cqi, 260px);
 }
diff --git a/examples/Tree.main.css b/examples/Tree.main.css
index 174530fae42..0f738607a4e 100644
--- a/examples/Tree.main.css
+++ b/examples/Tree.main.css
@@ -1,3 +1,3 @@
 .demo-tree {
-  width: min(100%, 260px);
+  width: min(100cqi, 260px);
 }
diff --git a/examples/Tree.selection.css b/examples/Tree.selection.css
index 174530fae42..0f738607a4e 100644
--- a/examples/Tree.selection.css
+++ b/examples/Tree.selection.css
@@ -1,3 +1,3 @@
 .demo-tree {
-  width: min(100%, 260px);
+  width: min(100cqi, 260px);
 }
diff --git a/examples/Tree.small.css b/examples/Tree.small.css
index 174530fae42..0f738607a4e 100644
--- a/examples/Tree.small.css
+++ b/examples/Tree.small.css
@@ -1,3 +1,3 @@
 .demo-tree {
-  width: min(100%, 260px);
+  width: min(100cqi, 260px);
 }
diff --git a/examples/Tree.visibilityCheckbox.css b/examples/Tree.visibilityCheckbox.css
index 174530fae42..0f738607a4e 100644
--- a/examples/Tree.visibilityCheckbox.css
+++ b/examples/Tree.visibilityCheckbox.css
@@ -1,3 +1,3 @@
 .demo-tree {
-  width: min(100%, 260px);
+  width: min(100cqi, 260px);
 }