fix: set floating-ui elements max size set to the view

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;

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: { viewports: [300, 300] } };
+
 export const customIcon = (): string => html`
   <div style="width:350px">
     <calcite-autocomplete icon="banana"></calcite-autocomplete>

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: { viewports: [300, 300] } };
+
 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 =>

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: { viewports: [300, 300] } };
+
 export const simpleAutoWidth = (): string => html`
   <calcite-dropdown open placement="${defaultMenuPlacement}" scale="m" type="click">
     <calcite-button slot="trigger">Open Dropdown</calcite-button>

packages/calcite-components/src/components/popover/popover.stories.ts

@@ -68,6 +68,19 @@ export const simple = (args: PopoverStoryArgs): string => html`
   </div>
 `;
 
+export const smallViewport = (): string => html`
+  ${referenceElementHTML}
+  <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: { viewports: [300, 300] } };
+
 export const darkModeRTL_TestOnly = (): string =>
   html` <div style="width: 400px;">
     ${referenceElementHTML}

packages/calcite-components/src/components/tooltip/tooltip.stories.ts

@@ -41,6 +41,15 @@ export const simple = (args: TooltipStoryArgs): string => html`
   </div>
 `;
 
+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, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua</calcite-tooltip
+  >
+`;
+smallViewport.parameters = { chromatic: { viewports: [300, 300] } };
+
 export const open_TestOnly = (): string => html`
   <div style="width: 400px;">
     ${referenceElementHTML}