From 45dec1752c2a87c201feee8bafe923e093b33d5d Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Wed, 18 Dec 2024 08:58:47 -0800
Subject: [PATCH] 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
---
 .../src/assets/styles/_floating-ui.scss       |  1 +
 .../src/components/combobox/combobox.tsx      |  2 +-
 .../src/components/popover/popover.stories.ts | 26 ++++++++++---------
 .../src/components/tooltip/tooltip.stories.ts | 12 +++++----
 4 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/packages/calcite-components/src/assets/styles/_floating-ui.scss b/packages/calcite-components/src/assets/styles/_floating-ui.scss
index 6f092338f94..7f662193b31 100644
--- 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
index 4dd4ac213b2..5272e9ddd8c 100644
--- 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
index 18e2889b083..8bf9afea71b 100644
--- 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
index b8eddb48295..e592f85f617 100644
--- 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`