cmk-ui-library: flip a floating dropdown with no room below it

A list capped to reka-ui's collision-aware available height always fits
the side it sits on, so its flip never saw a collision: the list stayed
under the button and collapsed to the room it had, down to its 2px
border once the 40px grace margin drove the cap negative.

The margin moves to the popover's collision padding, where it applies on
whichever side wins and cannot shrink the cap. The cap keeps a floor of
the space the list wants, which is what makes a collision happen at all.

Regressed with CMK-37626.

JIRA-Ref: CMK-37206
Change-Id: Iefe48b94442cf7e68baa2451a6438bff3130d822

Author: ottermata

packages/cmk-ui-library/components/CmkDropdown/CmkDropdown.vue

@@ -186,11 +186,17 @@ const supportsAnchorPositioning =
 
 const flippedUp = ref(false)
 
-const nonFloatingMaxHeight = supportsAnchorPositioning ? 'none' : '200px'
+const nonFloatingMaxHeight = supportsAnchorPositioning ? 'none' : `${PREFERRED_MIN_BELOW_PX}px`
 // Grace margin kept between the list and the viewport edge.
-const viewportBottomMargin = '40px'
-// reka-ui provides this collision-aware available-height var.
-const floatingMaxHeight = `calc(var(--reka-popper-available-height, 500px) - ${viewportBottomMargin})`
+const VIEWPORT_MARGIN_PX = 40
+const viewportMargin = `${VIEWPORT_MARGIN_PX}px`
+const floatingCollisionPadding = { top: VIEWPORT_MARGIN_PX, bottom: VIEWPORT_MARGIN_PX }
+// reka-ui provides the collision-aware available height, already less the collision padding above.
+// The floor is what lets its flip still fire: a list capped to exactly the room it has never
+// collides, so without it the list stays below the button and shrinks to a sliver.
+// The var is only set once reka-ui has positioned the list, and an unset one would take the whole
+// declaration down with it, so the fallback caps the list until then.
+const floatingMaxHeight = `max(${PREFERRED_MIN_BELOW_PX}px, var(--reka-popper-available-height, 500px))`
 
 // Swallow the click-outside fired by the in-flight bubble when open() is
 // called from a sibling's click handler.
@@ -378,6 +384,7 @@ const group = computed<ButtonVariants['group']>(() => {
         <PopoverContent
           side="bottom"
           align="start"
+          :collision-padding="floatingCollisionPadding"
           class="cmk-dropdown__floating"
           :style="{ position: 'relative', zIndex: 'var(--z-index-dropdown-offset)' }"
           @open-auto-focus.prevent
@@ -402,7 +409,7 @@ const group = computed<ButtonVariants['group']>(() => {
 
 <style scoped>
 .cmk-dropdown {
-  --cmk-dropdown-viewport-margin: v-bind(viewportBottomMargin);
+  --cmk-dropdown-viewport-margin: v-bind(viewportMargin);
 
   display: inline-block;
   position: relative;