From 09d8b5e184068783cac085039d06d2fb82e02e29 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Tue, 18 Feb 2025 10:25:43 -0800
Subject: [PATCH 01/10] fix: set floating-ui elements max size set to the view

---
 packages/calcite-components/src/assets/styles/_floating-ui.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/calcite-components/src/assets/styles/_floating-ui.scss b/packages/calcite-components/src/assets/styles/_floating-ui.scss
index 27b6522ef71..a89beb54667 100644
--- a/packages/calcite-components/src/assets/styles/_floating-ui.scss
+++ b/packages/calcite-components/src/assets/styles/_floating-ui.scss
@@ -71,6 +71,8 @@ $floating-ui-transition-offset: 5px;
 @mixin floating-ui-container() {
   inline-size: max-content;
   display: none;
+  max-inline-size: 100vw;
+  max-block-size: 100vh;
   inset-block-start: 0;
   /* stylelint-disable-next-line liberty/use-logical-spec -- explicit position */
   left: 0;

From 77a4b4dc4810f7ea98e6b855ec9a59cc9823c76a Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Tue, 18 Feb 2025 10:43:18 -0800
Subject: [PATCH 02/10] add story

---
 .../src/components/tooltip/tooltip.stories.ts             | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/calcite-components/src/components/tooltip/tooltip.stories.ts b/packages/calcite-components/src/components/tooltip/tooltip.stories.ts
index e592f85f617..59f329cf6d5 100644
--- a/packages/calcite-components/src/components/tooltip/tooltip.stories.ts
+++ b/packages/calcite-components/src/components/tooltip/tooltip.stories.ts
@@ -41,6 +41,14 @@ export const simple = (args: TooltipStoryArgs): string => html`
   </div>
 `;
 
+export const smallViewport = (): string => html`
+  ${referenceElementHTML}
+  <calcite-tooltip reference-element="reference-element" open>
+    <span> ${contentHTML} </span>
+  </calcite-tooltip>
+`;
+smallViewport.parameters = { chromatic: { delay: 10000, viewports: [240] } };
+
 export const open_TestOnly = (): string => html`
   <div style="width: 400px;">
     ${referenceElementHTML}

From 1299fb193fe9b41a103c47be2b0e2534da0874f2 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Tue, 18 Feb 2025 10:49:07 -0800
Subject: [PATCH 03/10] add stories

---
 .../autocomplete/autocomplete.stories.ts      | 14 +++++++
 .../components/combobox/combobox.stories.ts   | 38 ++++++++++++++++---
 .../components/dropdown/dropdown.stories.ts   | 12 ++++++
 .../input-date-picker.stories.ts              |  5 +++
 .../src/components/popover/popover.stories.ts |  6 +++
 5 files changed, 70 insertions(+), 5 deletions(-)

diff --git a/packages/calcite-components/src/components/autocomplete/autocomplete.stories.ts b/packages/calcite-components/src/components/autocomplete/autocomplete.stories.ts
index 513c2f041dc..829172b5982 100644
--- a/packages/calcite-components/src/components/autocomplete/autocomplete.stories.ts
+++ b/packages/calcite-components/src/components/autocomplete/autocomplete.stories.ts
@@ -134,6 +134,20 @@ export const simple = (args: AutocompleteStoryArgs): string => html`
   </div>
 `;
 
+export const smallViewport = (): string => html`
+  <calcite-autocomplete open>
+    <calcite-autocomplete-item-group heading="Dogs">
+      <calcite-autocomplete-item label="Rover" value="rover" heading="Rover"></calcite-autocomplete-item>
+      <calcite-autocomplete-item label="Fido" value="one" heading="Fido"></calcite-autocomplete-item>
+    </calcite-autocomplete-item-group>
+    <calcite-autocomplete-item-group heading="Cats">
+      <calcite-autocomplete-item label="Felix" value="felix" heading="Felix"></calcite-autocomplete-item>
+      <calcite-autocomplete-item label="Garfield" value="garfield" heading="Garfield"></calcite-autocomplete-item>
+    </calcite-autocomplete-item-group>
+  </calcite-autocomplete>
+`;
+smallViewport.parameters = { chromatic: { delay: 10000, viewports: [240] } };
+
 export const customIcon = (): string => html`
   <div style="width:350px">
     <calcite-autocomplete icon="banana"></calcite-autocomplete>
diff --git a/packages/calcite-components/src/components/combobox/combobox.stories.ts b/packages/calcite-components/src/components/combobox/combobox.stories.ts
index ef8a3cf1ce6..d1521aa8abb 100644
--- a/packages/calcite-components/src/components/combobox/combobox.stories.ts
+++ b/packages/calcite-components/src/components/combobox/combobox.stories.ts
@@ -93,6 +93,34 @@ export const single = (): string => html`
   </div>
 `;
 
+export const smallViewport = (): string => html`
+  <calcite-combobox
+    selection-display="all"
+    selection-mode="single"
+    label="demo"
+    open
+    max-items="0"
+    placeholder="placeholder"
+    scale="m"
+    status="idle"
+  >
+    <calcite-combobox-item icon="altitude" value="altitude" text-label="Altitude" selected></calcite-combobox-item>
+    <calcite-combobox-item icon="article" value="article" text-label="Article"></calcite-combobox-item>
+    <calcite-combobox-item icon="attachment" value="attachment" text-label="Attachment"></calcite-combobox-item>
+    <calcite-combobox-item icon="banana" value="banana" text-label="Banana"></calcite-combobox-item>
+    <calcite-combobox-item icon="battery3" value="battery" text-label="Battery Charging"></calcite-combobox-item>
+    <calcite-combobox-item icon="beaker" value="beaker" text-label="Beaker"></calcite-combobox-item>
+    <calcite-combobox-item icon="bell" value="bell" text-label="Bell"></calcite-combobox-item>
+    <calcite-combobox-item icon="bookmark" value="bookmark" text-label="Bookmark"></calcite-combobox-item>
+    <calcite-combobox-item icon="brightness" value="brightness" text-label="Brightness"></calcite-combobox-item>
+    <calcite-combobox-item icon="calendar" value="calendar" text-label="Calendar"></calcite-combobox-item>
+    <calcite-combobox-item icon="camera" value="camera" text-label="Camera"></calcite-combobox-item>
+    <calcite-combobox-item icon="car" value="car" text-label="Car"></calcite-combobox-item>
+    <calcite-combobox-item icon="clock" value="clock" text-label="Clock"></calcite-combobox-item>
+  </calcite-combobox>
+`;
+smallViewport.parameters = { chromatic: { delay: 10000, viewports: [240] } };
+
 export const multiple = (): string => html`
   <div style="width:400px;max-width:100%;background-color:white;padding:100px">
     <h2>selection-display="all" (default)</h2>
@@ -384,8 +412,8 @@ const style = html`
 
 export const longItemsAllSelectionModes = (): string => html`
   ${style}
-  <div style="display: flex; flex-direction: column;"> 
-    <div style="display: flex; flex-direction: row; margin-block-end: 160px;"> 
+  <div style="display: flex; flex-direction: column;">
+    <div style="display: flex; flex-direction: row; margin-block-end: 160px;">
       <calcite-combobox open selection-mode="single" style="margin-right: 20px;">
         <calcite-combobox-item text-label="Layers">
         <calcite-combobox-item text-label="Enriched USA Census Tract Areas Aug29"></calcite-combobox-item>
@@ -399,7 +427,7 @@ export const longItemsAllSelectionModes = (): string => html`
       </calcite-combobox>
     </div>
 
-    <div style="display: flex; flex-direction: row;"> 
+    <div style="display: flex; flex-direction: row;">
       <calcite-combobox open selection-mode="multiple" style="margin-right: 20px;">
         <calcite-combobox-item-group label="First item group">
           <calcite-combobox-item text-label="Enriched USA Census Tract Areas Aug29"></calcite-combobox-item>
@@ -418,8 +446,8 @@ export const longItemsAllSelectionModes = (): string => html`
           </calcite-combobox-item>
         </calcite-combobox-item-group>
       </calcite-combobox>
-    </div> 
-  <div> 
+    </div>
+  <div>
 `;
 
 export const disabled_TestOnly = (): string =>
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.stories.ts b/packages/calcite-components/src/components/dropdown/dropdown.stories.ts
index f4903be857b..11196dd9e29 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.stories.ts
+++ b/packages/calcite-components/src/components/dropdown/dropdown.stories.ts
@@ -75,6 +75,18 @@ export const simple = (args: DropdownStoryArgs): string => html`
   </calcite-dropdown>
 `;
 
+export const smallViewport = (): string => html`
+  <calcite-dropdown open>
+    <calcite-button slot="trigger">Open Dropdown</calcite-button>
+    <calcite-dropdown-group group-title="Sort by">
+      <calcite-dropdown-item>Relevance</calcite-dropdown-item>
+      <calcite-dropdown-item selected>Date modified</calcite-dropdown-item>
+      <calcite-dropdown-item>Title</calcite-dropdown-item>
+    </calcite-dropdown-group>
+  </calcite-dropdown>
+`;
+smallViewport.parameters = { chromatic: { delay: 10000, viewports: [240] } };
+
 export const simpleAutoWidth = (): string => html`
   <calcite-dropdown open placement="${defaultMenuPlacement}" scale="m" type="click">
     <calcite-button slot="trigger">Open Dropdown</calcite-button>
diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
index 6c89d1c84b2..4f329d0c185 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
@@ -76,6 +76,11 @@ export const simple = (args: InputDatePickerStoryArgs): string => html`
   </div>
 `;
 
+export const smallViewport = (): string => html`
+  <calcite-input-date-picker value="2020-02-12" open></calcite-input-date-picker>
+`;
+smallViewport.parameters = { chromatic: { delay: 10000, viewports: [240] } };
+
 export const withMinMax = (): string =>
   html` <style>
       .container {
diff --git a/packages/calcite-components/src/components/popover/popover.stories.ts b/packages/calcite-components/src/components/popover/popover.stories.ts
index 8bf9afea71b..490bd1df61a 100644
--- a/packages/calcite-components/src/components/popover/popover.stories.ts
+++ b/packages/calcite-components/src/components/popover/popover.stories.ts
@@ -68,6 +68,12 @@ export const simple = (args: PopoverStoryArgs): string => html`
   </div>
 `;
 
+export const smallViewport = (): string => html`
+  ${referenceElementHTML}
+  <calcite-popover reference-element="reference-element" open> ${contentHTML} </calcite-popover>
+`;
+smallViewport.parameters = { chromatic: { delay: 10000, viewports: [240] } };
+
 export const darkModeRTL_TestOnly = (): string =>
   html` <div style="width: 400px;">
     ${referenceElementHTML}

From c6a63abce233b4943395a9a71317f1f71afddaa5 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Tue, 18 Feb 2025 11:03:18 -0800
Subject: [PATCH 04/10] cleanup

---
 .../src/components/popover/popover.stories.ts            | 9 ++++++++-
 .../src/components/tooltip/tooltip.stories.ts            | 4 +---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/calcite-components/src/components/popover/popover.stories.ts b/packages/calcite-components/src/components/popover/popover.stories.ts
index 490bd1df61a..7c0857c391f 100644
--- a/packages/calcite-components/src/components/popover/popover.stories.ts
+++ b/packages/calcite-components/src/components/popover/popover.stories.ts
@@ -70,7 +70,14 @@ export const simple = (args: PopoverStoryArgs): string => html`
 
 export const smallViewport = (): string => html`
   ${referenceElementHTML}
-  <calcite-popover reference-element="reference-element" open> ${contentHTML} </calcite-popover>
+  <calcite-popover reference-element="reference-element" open>
+    <b>I am a title!</b> <br />
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+      magna aliqua.
+    </p>
+    <calcite-link>I am an inline link</calcite-link>
+  </calcite-popover>
 `;
 smallViewport.parameters = { chromatic: { delay: 10000, viewports: [240] } };
 
diff --git a/packages/calcite-components/src/components/tooltip/tooltip.stories.ts b/packages/calcite-components/src/components/tooltip/tooltip.stories.ts
index 59f329cf6d5..f2fc3da2d1f 100644
--- a/packages/calcite-components/src/components/tooltip/tooltip.stories.ts
+++ b/packages/calcite-components/src/components/tooltip/tooltip.stories.ts
@@ -43,9 +43,7 @@ export const simple = (args: TooltipStoryArgs): string => html`
 
 export const smallViewport = (): string => html`
   ${referenceElementHTML}
-  <calcite-tooltip reference-element="reference-element" open>
-    <span> ${contentHTML} </span>
-  </calcite-tooltip>
+  <calcite-tooltip reference-element="reference-element" open>${contentHTML}</calcite-tooltip>
 `;
 smallViewport.parameters = { chromatic: { delay: 10000, viewports: [240] } };
 

From 54f2db551acb66f2be5641766710b79709e340df Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Tue, 18 Feb 2025 11:12:26 -0800
Subject: [PATCH 05/10] stories

---
 .../input-date-picker/input-date-picker.stories.ts           | 5 -----
 .../src/components/tooltip/tooltip.stories.ts                | 2 +-
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
index 4f329d0c185..6c89d1c84b2 100644
--- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
+++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts
@@ -76,11 +76,6 @@ export const simple = (args: InputDatePickerStoryArgs): string => html`
   </div>
 `;
 
-export const smallViewport = (): string => html`
-  <calcite-input-date-picker value="2020-02-12" open></calcite-input-date-picker>
-`;
-smallViewport.parameters = { chromatic: { delay: 10000, viewports: [240] } };
-
 export const withMinMax = (): string =>
   html` <style>
       .container {
diff --git a/packages/calcite-components/src/components/tooltip/tooltip.stories.ts b/packages/calcite-components/src/components/tooltip/tooltip.stories.ts
index f2fc3da2d1f..a2130445ae7 100644
--- a/packages/calcite-components/src/components/tooltip/tooltip.stories.ts
+++ b/packages/calcite-components/src/components/tooltip/tooltip.stories.ts
@@ -42,7 +42,7 @@ export const simple = (args: TooltipStoryArgs): string => html`
 `;
 
 export const smallViewport = (): string => html`
-  ${referenceElementHTML}
+  <calcite-button appearance="transparent" kind="neutral" id="reference-element">nostrud</calcite-button>
   <calcite-tooltip reference-element="reference-element" open>${contentHTML}</calcite-tooltip>
 `;
 smallViewport.parameters = { chromatic: { delay: 10000, viewports: [240] } };

From 7014fac1a003e08076dd0e7d659967c4aa82fe56 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Tue, 18 Feb 2025 11:22:10 -0800
Subject: [PATCH 06/10] cleanup

---
 .../src/components/tooltip/tooltip.stories.ts                | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/tooltip/tooltip.stories.ts b/packages/calcite-components/src/components/tooltip/tooltip.stories.ts
index a2130445ae7..2793eccf355 100644
--- a/packages/calcite-components/src/components/tooltip/tooltip.stories.ts
+++ b/packages/calcite-components/src/components/tooltip/tooltip.stories.ts
@@ -43,7 +43,10 @@ export const simple = (args: TooltipStoryArgs): string => html`
 
 export const smallViewport = (): string => html`
   <calcite-button appearance="transparent" kind="neutral" id="reference-element">nostrud</calcite-button>
-  <calcite-tooltip reference-element="reference-element" open>${contentHTML}</calcite-tooltip>
+  <calcite-tooltip reference-element="reference-element" open
+    >Lorem ipsum dolor sit amet, conse ctetur adip iscing elit, sed do eiusmod tempor incid idunt ut labore et dolore
+    magna aliqua</calcite-tooltip
+  >
 `;
 smallViewport.parameters = { chromatic: { delay: 10000, viewports: [240] } };
 

From 3acec28616934f4e8741d78548c082e5ccb9633e Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Tue, 18 Feb 2025 13:03:39 -0800
Subject: [PATCH 07/10] update stories

---
 .../src/components/autocomplete/autocomplete.stories.ts     | 2 +-
 .../src/components/combobox/combobox.stories.ts             | 2 +-
 .../src/components/dropdown/dropdown.stories.ts             | 2 +-
 .../src/components/popover/popover.stories.ts               | 2 +-
 .../src/components/tooltip/tooltip.stories.ts               | 6 +++---
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/calcite-components/src/components/autocomplete/autocomplete.stories.ts b/packages/calcite-components/src/components/autocomplete/autocomplete.stories.ts
index 829172b5982..70034eb60a7 100644
--- a/packages/calcite-components/src/components/autocomplete/autocomplete.stories.ts
+++ b/packages/calcite-components/src/components/autocomplete/autocomplete.stories.ts
@@ -146,7 +146,7 @@ export const smallViewport = (): string => html`
     </calcite-autocomplete-item-group>
   </calcite-autocomplete>
 `;
-smallViewport.parameters = { chromatic: { delay: 10000, viewports: [240] } };
+smallViewport.parameters = { chromatic: { delay: 10000, viewports: [300] } };
 
 export const customIcon = (): string => html`
   <div style="width:350px">
diff --git a/packages/calcite-components/src/components/combobox/combobox.stories.ts b/packages/calcite-components/src/components/combobox/combobox.stories.ts
index d1521aa8abb..54728d645a2 100644
--- a/packages/calcite-components/src/components/combobox/combobox.stories.ts
+++ b/packages/calcite-components/src/components/combobox/combobox.stories.ts
@@ -119,7 +119,7 @@ export const smallViewport = (): string => html`
     <calcite-combobox-item icon="clock" value="clock" text-label="Clock"></calcite-combobox-item>
   </calcite-combobox>
 `;
-smallViewport.parameters = { chromatic: { delay: 10000, viewports: [240] } };
+smallViewport.parameters = { chromatic: { delay: 10000, viewports: [300] } };
 
 export const multiple = (): string => html`
   <div style="width:400px;max-width:100%;background-color:white;padding:100px">
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.stories.ts b/packages/calcite-components/src/components/dropdown/dropdown.stories.ts
index 11196dd9e29..5bcedefd5a4 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.stories.ts
+++ b/packages/calcite-components/src/components/dropdown/dropdown.stories.ts
@@ -85,7 +85,7 @@ export const smallViewport = (): string => html`
     </calcite-dropdown-group>
   </calcite-dropdown>
 `;
-smallViewport.parameters = { chromatic: { delay: 10000, viewports: [240] } };
+smallViewport.parameters = { chromatic: { delay: 10000, viewports: [300] } };
 
 export const simpleAutoWidth = (): string => html`
   <calcite-dropdown open placement="${defaultMenuPlacement}" scale="m" type="click">
diff --git a/packages/calcite-components/src/components/popover/popover.stories.ts b/packages/calcite-components/src/components/popover/popover.stories.ts
index 7c0857c391f..70c471abfb9 100644
--- a/packages/calcite-components/src/components/popover/popover.stories.ts
+++ b/packages/calcite-components/src/components/popover/popover.stories.ts
@@ -79,7 +79,7 @@ export const smallViewport = (): string => html`
     <calcite-link>I am an inline link</calcite-link>
   </calcite-popover>
 `;
-smallViewport.parameters = { chromatic: { delay: 10000, viewports: [240] } };
+smallViewport.parameters = { chromatic: { delay: 10000, viewports: [300] } };
 
 export const darkModeRTL_TestOnly = (): string =>
   html` <div style="width: 400px;">
diff --git a/packages/calcite-components/src/components/tooltip/tooltip.stories.ts b/packages/calcite-components/src/components/tooltip/tooltip.stories.ts
index 2793eccf355..d226af323e1 100644
--- a/packages/calcite-components/src/components/tooltip/tooltip.stories.ts
+++ b/packages/calcite-components/src/components/tooltip/tooltip.stories.ts
@@ -44,11 +44,11 @@ export const simple = (args: TooltipStoryArgs): string => html`
 export const smallViewport = (): string => html`
   <calcite-button appearance="transparent" kind="neutral" id="reference-element">nostrud</calcite-button>
   <calcite-tooltip reference-element="reference-element" open
-    >Lorem ipsum dolor sit amet, conse ctetur adip iscing elit, sed do eiusmod tempor incid idunt ut labore et dolore
-    magna aliqua</calcite-tooltip
+    >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua</calcite-tooltip
   >
 `;
-smallViewport.parameters = { chromatic: { delay: 10000, viewports: [240] } };
+smallViewport.parameters = { chromatic: { delay: 10000, viewports: [300] } };
 
 export const open_TestOnly = (): string => html`
   <div style="width: 400px;">

From d3a364c38d1ee6f52edc7ac29945db66889daff7 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Tue, 18 Feb 2025 13:25:06 -0800
Subject: [PATCH 08/10] cleanup

---
 .../calcite-components/src/assets/styles/_floating-ui.scss    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/assets/styles/_floating-ui.scss b/packages/calcite-components/src/assets/styles/_floating-ui.scss
index a89beb54667..1eb884f37c7 100644
--- a/packages/calcite-components/src/assets/styles/_floating-ui.scss
+++ b/packages/calcite-components/src/assets/styles/_floating-ui.scss
@@ -71,8 +71,8 @@ $floating-ui-transition-offset: 5px;
 @mixin floating-ui-container() {
   inline-size: max-content;
   display: none;
-  max-inline-size: 100vw;
-  max-block-size: 100vh;
+  max-inline-size: 100%;
+  max-block-size: 100%;
   inset-block-start: 0;
   /* stylelint-disable-next-line liberty/use-logical-spec -- explicit position */
   left: 0;

From c57e9c025701636938041674ba9c9159264921d3 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Tue, 18 Feb 2025 13:38:30 -0800
Subject: [PATCH 09/10] vw/vh

---
 .../calcite-components/src/assets/styles/_floating-ui.scss    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/assets/styles/_floating-ui.scss b/packages/calcite-components/src/assets/styles/_floating-ui.scss
index 1eb884f37c7..a89beb54667 100644
--- a/packages/calcite-components/src/assets/styles/_floating-ui.scss
+++ b/packages/calcite-components/src/assets/styles/_floating-ui.scss
@@ -71,8 +71,8 @@ $floating-ui-transition-offset: 5px;
 @mixin floating-ui-container() {
   inline-size: max-content;
   display: none;
-  max-inline-size: 100%;
-  max-block-size: 100%;
+  max-inline-size: 100vw;
+  max-block-size: 100vh;
   inset-block-start: 0;
   /* stylelint-disable-next-line liberty/use-logical-spec -- explicit position */
   left: 0;

From 50e8cab5e6a2183dd03944217ddfe1c6b9691d5a Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Tue, 18 Feb 2025 13:48:49 -0800
Subject: [PATCH 10/10] cleanup

---
 .../src/components/autocomplete/autocomplete.stories.ts         | 2 +-
 .../src/components/combobox/combobox.stories.ts                 | 2 +-
 .../src/components/dropdown/dropdown.stories.ts                 | 2 +-
 .../src/components/popover/popover.stories.ts                   | 2 +-
 .../src/components/tooltip/tooltip.stories.ts                   | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/calcite-components/src/components/autocomplete/autocomplete.stories.ts b/packages/calcite-components/src/components/autocomplete/autocomplete.stories.ts
index 70034eb60a7..2d25711c0d0 100644
--- a/packages/calcite-components/src/components/autocomplete/autocomplete.stories.ts
+++ b/packages/calcite-components/src/components/autocomplete/autocomplete.stories.ts
@@ -146,7 +146,7 @@ export const smallViewport = (): string => html`
     </calcite-autocomplete-item-group>
   </calcite-autocomplete>
 `;
-smallViewport.parameters = { chromatic: { delay: 10000, viewports: [300] } };
+smallViewport.parameters = { chromatic: { viewports: [300, 300] } };
 
 export const customIcon = (): string => html`
   <div style="width:350px">
diff --git a/packages/calcite-components/src/components/combobox/combobox.stories.ts b/packages/calcite-components/src/components/combobox/combobox.stories.ts
index 54728d645a2..90ae8e3aefc 100644
--- a/packages/calcite-components/src/components/combobox/combobox.stories.ts
+++ b/packages/calcite-components/src/components/combobox/combobox.stories.ts
@@ -119,7 +119,7 @@ export const smallViewport = (): string => html`
     <calcite-combobox-item icon="clock" value="clock" text-label="Clock"></calcite-combobox-item>
   </calcite-combobox>
 `;
-smallViewport.parameters = { chromatic: { delay: 10000, viewports: [300] } };
+smallViewport.parameters = { chromatic: { viewports: [300, 300] } };
 
 export const multiple = (): string => html`
   <div style="width:400px;max-width:100%;background-color:white;padding:100px">
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.stories.ts b/packages/calcite-components/src/components/dropdown/dropdown.stories.ts
index 5bcedefd5a4..4fd0f744b8c 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.stories.ts
+++ b/packages/calcite-components/src/components/dropdown/dropdown.stories.ts
@@ -85,7 +85,7 @@ export const smallViewport = (): string => html`
     </calcite-dropdown-group>
   </calcite-dropdown>
 `;
-smallViewport.parameters = { chromatic: { delay: 10000, viewports: [300] } };
+smallViewport.parameters = { chromatic: { viewports: [300, 300] } };
 
 export const simpleAutoWidth = (): string => html`
   <calcite-dropdown open placement="${defaultMenuPlacement}" scale="m" type="click">
diff --git a/packages/calcite-components/src/components/popover/popover.stories.ts b/packages/calcite-components/src/components/popover/popover.stories.ts
index 70c471abfb9..b78bc496c48 100644
--- a/packages/calcite-components/src/components/popover/popover.stories.ts
+++ b/packages/calcite-components/src/components/popover/popover.stories.ts
@@ -79,7 +79,7 @@ export const smallViewport = (): string => html`
     <calcite-link>I am an inline link</calcite-link>
   </calcite-popover>
 `;
-smallViewport.parameters = { chromatic: { delay: 10000, viewports: [300] } };
+smallViewport.parameters = { chromatic: { viewports: [300, 300] } };
 
 export const darkModeRTL_TestOnly = (): string =>
   html` <div style="width: 400px;">
diff --git a/packages/calcite-components/src/components/tooltip/tooltip.stories.ts b/packages/calcite-components/src/components/tooltip/tooltip.stories.ts
index d226af323e1..f6258c90dff 100644
--- a/packages/calcite-components/src/components/tooltip/tooltip.stories.ts
+++ b/packages/calcite-components/src/components/tooltip/tooltip.stories.ts
@@ -48,7 +48,7 @@ export const smallViewport = (): string => html`
     aliqua</calcite-tooltip
   >
 `;
-smallViewport.parameters = { chromatic: { delay: 10000, viewports: [300] } };
+smallViewport.parameters = { chromatic: { viewports: [300, 300] } };
 
 export const open_TestOnly = (): string => html`
   <div style="width: 400px;">