chore(test): resetting screenshot test for irrelevant issue

Author: ShaneK

core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-ios-ltr-Mobile-Safari-linux.png

@@ -74,6 +74,7 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
     arrowTop,
     arrowLeft,
     addPopoverBottomClass,
+    isFullyConstrained,
   } = calculateWindowAdjustment(
     side,
     results.top,
@@ -156,6 +157,13 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
 
       if (bottomValue !== undefined) {
         contentEl.style.setProperty('bottom', `calc(${bottomValue})`);
+        /**
+         * When both top and bottom are set, we need to override the
+         * height: var(--height) style to allow the top/bottom constraint
+         * to determine the height. Setting height to 'auto' with both
+         * top and bottom defined would cause bottom to be ignored.
+         */
+        contentEl.style.setProperty('height', 'unset');
       }
 
       contentEl.style.setProperty('top', `calc(${topValue} + var(--offset-y, 0))`);
@@ -164,7 +172,11 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
 
       if (arrowEl !== null) {
         const didAdjustBounds = results.top !== top || results.left !== left;
-        const showArrow = shouldShowArrow(side, didAdjustBounds, ev, trigger);
+        /**
+         * Hide the arrow when the popover is fully constrained to the viewport
+         * because it cannot accurately point to the trigger in this case.
+         */
+        const showArrow = shouldShowArrow(side, didAdjustBounds, ev, trigger) && !isFullyConstrained;
 
         if (showArrow) {
           arrowEl.style.setProperty('top', `calc(${arrowTop}px + var(--offset-y, 0))`);

core/src/components/popover/animations/ios.enter.ts

@@ -134,6 +134,13 @@ export const mdEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
     .beforeAddWrite(() => {
       if (bottomValue !== undefined) {
         contentEl.style.setProperty('bottom', `calc(${bottomValue})`);
+        /**
+         * When both top and bottom are set, we need to override the
+         * height: var(--height) style to allow the top/bottom constraint
+         * to determine the height. Setting height to 'auto' with both
+         * top and bottom defined would cause bottom to be ignored.
+         */
+        contentEl.style.setProperty('height', 'unset');
       }
     })
     .fromTo('transform', 'scale(0.8)', 'scale(1)');

core/src/components/popover/animations/md.enter.ts

@@ -37,6 +37,13 @@ export interface PopoverStyles {
   arrowTop: number;
   arrowLeft: number;
   addPopoverBottomClass: boolean;
+  /**
+   * When true, the popover content was too tall to fit above or below
+   * the trigger, so it was constrained to the full viewport height.
+   * In this case, the arrow should be hidden as it cannot accurately
+   * point to the trigger.
+   */
+  isFullyConstrained: boolean;
 }
 
 /**
@@ -835,6 +842,7 @@ export const calculateWindowAdjustment = (
   let checkSafeAreaBottom = false;
   let checkSafeAreaLeft = false;
   let checkSafeAreaRight = false;
+  let isFullyConstrained = false;
   const triggerTop = triggerCoordinates
     ? triggerCoordinates.top + triggerCoordinates.height
     : bodyHeight / 2 - contentHeight / 2;
@@ -845,20 +853,29 @@ export const calculateWindowAdjustment = (
    * Adjust popover so it does not
    * go off the left of the screen.
    */
-  if (left < bodyPadding + safeAreaMargin) {
+  if (left < bodyPadding) {
     left = bodyPadding;
-    checkSafeAreaLeft = true;
     originX = 'left';
     /**
      * Adjust popover so it does not
      * go off the right of the screen.
      */
-  } else if (contentWidth + bodyPadding + left + safeAreaMargin > bodyWidth) {
-    checkSafeAreaRight = true;
+  } else if (contentWidth + bodyPadding + left > bodyWidth) {
     left = bodyWidth - contentWidth - bodyPadding;
     originX = 'right';
   }
 
+  /**
+   * After position adjustment, check if popover is near edges
+   * and needs safe-area CSS variable adjustments.
+   */
+  if (left <= safeAreaMargin) {
+    checkSafeAreaLeft = true;
+  }
+  if (left + contentWidth >= bodyWidth - safeAreaMargin) {
+    checkSafeAreaRight = true;
+  }
+
   /**
    * Adjust popover so it does not
    * go off the top of the screen.
@@ -892,29 +909,49 @@ export const calculateWindowAdjustment = (
         top = bodyPadding;
       }
 
+      /**
+       * After flipping above, check if popover still extends into bottom safe area.
+       * This can happen when the popover is taller than the available space between
+       * the top safe area and the trigger. In this case, constrain with bottom too.
+       *
+       * We estimate the effective top by adding safeAreaMargin if checkSafeAreaTop
+       * is true (since CSS will add the actual safe-area-top value).
+       */
+      const estimatedTop = checkSafeAreaTop ? top + safeAreaMargin : top;
+      if (estimatedTop + contentHeight > bodyHeight - safeAreaMargin) {
+        bottom = bodyPadding;
+        checkSafeAreaBottom = true;
+        isFullyConstrained = true;
+      }
+
       /**
        * If not enough room for popover to appear
-       * above trigger, then cut it off.
+       * above trigger, constrain to full viewport.
+       * Pin both top and bottom to maximize visible area
+       * and let the content scroll within those bounds.
        */
     } else {
+      top = bodyPadding;
       bottom = bodyPadding;
-      /**
-       * When the popover is pinned to the bottom, account for safe area.
-       * This ensures the popover doesn't overlap with home indicators
-       * or navigation bars (e.g., Android API 36+ edge-to-edge).
-       */
+      checkSafeAreaTop = true;
       checkSafeAreaBottom = true;
+      isFullyConstrained = true;
     }
   }
 
   /**
    * Final check: If the popover extends into any safe-area region,
-   * ensure the corresponding flag is set regardless of side.
+   * constrain it to avoid overlapping system UI.
    * This handles cases where a side-positioned popover (left/right)
-   * still needs bottom safe-area padding because it extends into that region.
+   * or a bottom-positioned popover extends into the safe area.
    */
   const popoverBottom = bottom !== undefined ? bodyHeight - bottom : top + contentHeight;
-  if (popoverBottom + safeAreaMargin > bodyHeight) {
+  if (popoverBottom + safeAreaMargin > bodyHeight && bottom === undefined) {
+    /**
+     * Popover extends into bottom safe area but isn't already constrained.
+     * Set bottom to constrain the popover and apply safe-area adjustment.
+     */
+    bottom = bodyPadding;
     checkSafeAreaBottom = true;
   }
   if (top < safeAreaMargin) {
@@ -934,6 +971,7 @@ export const calculateWindowAdjustment = (
     arrowTop,
     arrowLeft,
     addPopoverBottomClass,
+    isFullyConstrained,
   };
 };