chore: debugging

Author: ShaneK

core/src/components/modal/modal.tsx

@@ -277,6 +277,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
   @Listen('resize', { target: 'window' })
   onWindowResize() {
     // Update safe-area overrides for all modal types on resize
+    console.log('[onWindowResize] calling updateSafeAreaOverrides');
     this.updateSafeAreaOverrides();
 
     // Only handle view transition for iOS card modals when no custom animations are provided
@@ -666,6 +667,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
     }
 
     // Now that animation is complete, update safe-area based on actual position
+    console.log('[present animation complete] calling updateSafeAreaOverrides');
     this.updateSafeAreaOverrides();
 
     // Initialize view transition listener for iOS card modals
@@ -877,8 +879,19 @@ export class Modal implements ComponentInterface, OverlayInterface {
     const isCardModal = presentingElement !== undefined;
     const isTablet = window.innerWidth >= 768;
 
+    console.log('[setInitialSafeAreaOverrides] called', {
+      isSheetModal,
+      isCardModal,
+      isTablet,
+      breakpoints: this.breakpoints,
+      initialBreakpoint: this.initialBreakpoint,
+      presentingElement: !!presentingElement,
+      innerWidth: window.innerWidth,
+    });
+
     // Sheet modals: always touch bottom, top depends on breakpoint
     if (isSheetModal) {
+      console.log('[setInitialSafeAreaOverrides] Sheet modal path - setting top/left/right to 0, leaving bottom alone');
       style.setProperty('--ion-safe-area-top', '0px');
       // Don't override bottom - sheet always touches bottom
       style.setProperty('--ion-safe-area-left', '0px');
@@ -888,6 +901,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
 
     // Card modals are inset from edges (rounded corners), no safe areas needed
     if (isCardModal) {
+      console.log('[setInitialSafeAreaOverrides] Card modal path - setting all to 0');
       style.setProperty('--ion-safe-area-top', '0px');
       style.setProperty('--ion-safe-area-bottom', '0px');
       style.setProperty('--ion-safe-area-left', '0px');
@@ -897,6 +911,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
 
     // Phone modals are fullscreen, need all safe areas
     if (!isTablet) {
+      console.log('[setInitialSafeAreaOverrides] Phone modal path - not setting any overrides');
       // Don't set any overrides - inherit from :root
       return;
     }
@@ -907,12 +922,16 @@ export class Modal implements ComponentInterface, OverlayInterface {
     const width = computedStyle.getPropertyValue('--width').trim();
     const height = computedStyle.getPropertyValue('--height').trim();
 
+    console.log('[setInitialSafeAreaOverrides] Tablet modal path', { width, height });
+
     if (width === '100%' && height === '100%') {
+      console.log('[setInitialSafeAreaOverrides] Fullscreen tablet modal - not setting overrides');
       // Fullscreen modal - need safe areas, don't override
       return;
     }
 
     // Centered dialog - zero out all safe areas
+    console.log('[setInitialSafeAreaOverrides] Centered tablet dialog - setting all to 0');
     style.setProperty('--ion-safe-area-top', '0px');
     style.setProperty('--ion-safe-area-bottom', '0px');
     style.setProperty('--ion-safe-area-left', '0px');
@@ -926,7 +945,10 @@ export class Modal implements ComponentInterface, OverlayInterface {
    */
   private updateSafeAreaOverrides() {
     const wrapper = this.wrapperEl;
-    if (!wrapper) return;
+    if (!wrapper) {
+      console.log('[updateSafeAreaOverrides] No wrapper element, returning early');
+      return;
+    }
 
     const rect = wrapper.getBoundingClientRect();
     const threshold = 2; // Account for subpixel rendering
@@ -936,14 +958,44 @@ export class Modal implements ComponentInterface, OverlayInterface {
     const touchingLeft = rect.left <= threshold;
     const touchingRight = rect.right >= window.innerWidth - threshold;
 
+    console.log('[updateSafeAreaOverrides] called', {
+      isSheetModal: this.isSheetModal,
+      rect: { top: rect.top, bottom: rect.bottom, left: rect.left, right: rect.right },
+      innerHeight: window.innerHeight,
+      innerWidth: window.innerWidth,
+      threshold,
+      touchingTop,
+      touchingBottom,
+      touchingLeft,
+      touchingRight,
+      bottomCalc: `${rect.bottom} >= ${window.innerHeight - threshold} = ${touchingBottom}`,
+    });
+
     // Remove override when touching edge (allow inheritance), set to 0 when not touching
     const style = this.el.style;
+
+    const actions = {
+      top: touchingTop ? 'removeProperty' : 'setProperty 0px',
+      bottom: touchingBottom ? 'removeProperty' : 'setProperty 0px',
+      left: touchingLeft ? 'removeProperty' : 'setProperty 0px',
+      right: touchingRight ? 'removeProperty' : 'setProperty 0px',
+    };
+    console.log('[updateSafeAreaOverrides] actions:', actions);
+
     touchingTop ? style.removeProperty('--ion-safe-area-top') : style.setProperty('--ion-safe-area-top', '0px');
     touchingBottom
       ? style.removeProperty('--ion-safe-area-bottom')
       : style.setProperty('--ion-safe-area-bottom', '0px');
     touchingLeft ? style.removeProperty('--ion-safe-area-left') : style.setProperty('--ion-safe-area-left', '0px');
     touchingRight ? style.removeProperty('--ion-safe-area-right') : style.setProperty('--ion-safe-area-right', '0px');
+
+    // Log the actual style values after setting
+    console.log('[updateSafeAreaOverrides] after setting, inline styles:', {
+      top: style.getPropertyValue('--ion-safe-area-top'),
+      bottom: style.getPropertyValue('--ion-safe-area-bottom'),
+      left: style.getPropertyValue('--ion-safe-area-left'),
+      right: style.getPropertyValue('--ion-safe-area-right'),
+    });
   }
 
   private sheetOnDismiss() {