fix: floating ui elements set max-content for inline-size (#11095)

**Related Issue:** #10731 ## Summary - Follows [`floating-ui`'s initial layout recommendation](https://floating-ui.com/docs/computeposition#initial-layout). - Combobox wasn't correctly handling the size when in fixed overlay positioning - Example: https://codepen.io/Matt-Driscoll/pen/raByNmQ?editors=1010 - updated tooltip and popover stories where stories were being cut off due to sizing. BEGIN_COMMIT_OVERRIDE END_COMMIT_OVERRIDE
Esri · Feb 8, 2025 · 45dec17 · 45dec17
1 parent f717c60
commit 45dec17
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 18 deletions.
diff --git a/packages/calcite-components/src/assets/styles/_floating-ui.scss b/packages/calcite-components/src/assets/styles/_floating-ui.scss
@@ -65,6 +65,7 @@ $floating-ui-transition-offset: 5px;
 }
 
 @mixin floating-ui-container() {
+  inline-size: max-content;
   display: none;
   inset-block-start: 0;
   left: 0;

diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -925,7 +925,7 @@ export class Combobox
     await this.reposition(true);
     const maxScrollerHeight = this.getMaxScrollerHeight();
     listContainerEl.style.maxBlockSize = maxScrollerHeight > 0 ? `${maxScrollerHeight}px` : "";
-    listContainerEl.style.minWidth = `${referenceEl.clientWidth}px`;
+    listContainerEl.style.inlineSize = `${referenceEl.clientWidth}px`;
     await this.reposition(true);
   }
   private calciteChipCloseHandler(comboboxItem: HTMLCalciteComboboxItemElement["el"]): void {

diff --git a/packages/calcite-components/src/components/popover/popover.stories.ts b/packages/calcite-components/src/components/popover/popover.stories.ts
@@ -124,18 +124,20 @@ export const flipPlacements_TestOnly = (): string => html`
 `;
 
 export const scaleConsistencyPopoverHeadingActionSlottedIcon_TestOnly = (): string => html`
-  <div style="width: 400px;">
-    ${referenceElementHTML}
-    <calcite-popover
-      heading="Dreams didn't make us kings. Dragons did. 🐉"
-      reference-element="reference-element"
-      placement="auto"
-      open
-      closable
-      scale="m"
-    >
-      ${contentHTML}
-    </calcite-popover>
+  <div style="width: 800px; height:800px;">
+    <div style="width: 400px;">
+      ${referenceElementHTML}
+      <calcite-popover
+        heading="Dreams didn't make us kings. Dragons did. 🐉"
+        reference-element="reference-element"
+        placement="auto"
+        open
+        closable
+        scale="m"
+      >
+        ${contentHTML}
+      </calcite-popover>
+    </div>
   </div>
 `;
 

diff --git a/packages/calcite-components/src/components/tooltip/tooltip.stories.ts b/packages/calcite-components/src/components/tooltip/tooltip.stories.ts
@@ -75,11 +75,13 @@ export const darkModeRTL_TestOnly = (): string => html`
 darkModeRTL_TestOnly.parameters = { themes: modesDarkDefault };
 
 export const rightAligned_TestOnly = (): string =>
-  html`<div style="text-align: right">
-    <a href="#" id="tooltip-button">Hover for Tooltip</a>
-    <calcite-tooltip open reference-element="tooltip-button">
-      <span>Tooltip content lorem ipsum</span>
-    </calcite-tooltip>
+  html`<div style="width:800px; height:800px;">
+    <div style="text-align: right; width: 600px;">
+      <a href="#" id="tooltip-button">Hover for Tooltip</a>
+      <calcite-tooltip open reference-element="tooltip-button">
+        <span>Tooltip content lorem ipsum</span>
+      </calcite-tooltip>
+    </div>
   </div>`;
 
 export const transparentBG_TestOnly = (): string => html`