From bc5b3a3a8474baa63879fb5cd320d2f4c2b885cb Mon Sep 17 00:00:00 2001
From: ShaneK <shane@shanessite.net>
Date: Mon, 2 Feb 2026 06:00:40 -0800
Subject: [PATCH] fix(popover): apply safe area adjustments for edge
 positioning in md mode

---
 core/src/components/popover/animations/ios.enter.ts |  8 +++++++-
 core/src/components/popover/animations/md.enter.ts  | 10 +++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/core/src/components/popover/animations/ios.enter.ts b/core/src/components/popover/animations/ios.enter.ts
index 22e8da58d4..d269c56c5c 100644
--- a/core/src/components/popover/animations/ios.enter.ts
+++ b/core/src/components/popover/animations/ios.enter.ts
@@ -11,6 +11,12 @@ import {
 } from '../utils';
 
 const POPOVER_IOS_BODY_PADDING = 5;
+/**
+ * Extra margin around viewport edges for safe area detection.
+ * When popover is within this distance of an edge, safe area
+ * CSS variables will be applied to prevent overlap with system UI.
+ */
+const POPOVER_IOS_SAFE_AREA_MARGIN = 25;
 
 /**
  * iOS Popover Enter Animation
@@ -53,7 +59,7 @@ export const iosEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
   );
 
   const padding = size === 'cover' ? 0 : POPOVER_IOS_BODY_PADDING;
-  const margin = size === 'cover' ? 0 : 25;
+  const margin = size === 'cover' ? 0 : POPOVER_IOS_SAFE_AREA_MARGIN;
 
   const {
     originX,
diff --git a/core/src/components/popover/animations/md.enter.ts b/core/src/components/popover/animations/md.enter.ts
index e8a1e1adc5..39757db520 100644
--- a/core/src/components/popover/animations/md.enter.ts
+++ b/core/src/components/popover/animations/md.enter.ts
@@ -5,6 +5,12 @@ import type { Animation } from '../../../interface';
 import { calculateWindowAdjustment, getPopoverDimensions, getPopoverPosition } from '../utils';
 
 const POPOVER_MD_BODY_PADDING = 12;
+/**
+ * Extra margin around viewport edges for safe area detection.
+ * When popover is within this distance of an edge, safe area
+ * CSS variables will be applied to prevent overlap with system UI.
+ */
+const POPOVER_MD_SAFE_AREA_MARGIN = 25;
 
 /**
  * Md Popover Enter Animation
@@ -47,6 +53,8 @@ export const mdEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
 
   const padding = size === 'cover' ? 0 : POPOVER_MD_BODY_PADDING;
 
+  const margin = size === 'cover' ? 0 : POPOVER_MD_SAFE_AREA_MARGIN;
+
   const {
     originX,
     originY,
@@ -66,7 +74,7 @@ export const mdEnterAnimation = (baseEl: HTMLElement, opts?: any): Animation =>
     bodyHeight,
     contentWidth,
     contentHeight,
-    0,
+    margin,
     results.originX,
     results.originY,
     results.referenceCoordinates