fix(content): detect header/footer wrapped in custom components

Author: ShaneK

core/src/components/content/content.tsx

@@ -183,13 +183,27 @@ export class Content implements ComponentInterface {
   /**
    * Detects sibling ion-header and ion-footer elements.
    * When these are absent, content needs to handle safe-area padding directly.
+   *
+   * Checks both direct siblings and elements wrapped in custom components
+   * (e.g., <my-header><ion-header>...</ion-header></my-header>).
    */
   private detectSiblingElements() {
     // Check parent element for sibling header/footer.
     const parent = this.el.parentElement;
     if (parent) {
+      // First check for direct ion-header/ion-footer siblings
       this.hasHeader = parent.querySelector(':scope > ion-header') !== null;
       this.hasFooter = parent.querySelector(':scope > ion-footer') !== null;
+
+      // If not found as direct siblings, check if any sibling contains them.
+      // This handles cases where header/footer are wrapped in custom components
+      // (common in React, Vue, Angular component-based architectures).
+      if (!this.hasHeader) {
+        this.hasHeader = this.siblingContainsElement(parent, 'ion-header');
+      }
+      if (!this.hasFooter) {
+        this.hasFooter = this.siblingContainsElement(parent, 'ion-footer');
+      }
     }
 
     // If no footer found, check if we're inside ion-tabs which has ion-tab-bar
@@ -201,6 +215,22 @@ export class Content implements ComponentInterface {
     }
   }
 
+  /**
+   * Checks if any sibling element of ion-content contains the specified element.
+   * Only searches one level deep to avoid finding elements in nested pages.
+   */
+  private siblingContainsElement(parent: Element, tagName: string): boolean {
+    for (const sibling of parent.children) {
+      // Skip ion-content itself
+      if (sibling === this.el) continue;
+      // Check if this sibling contains the target element as an immediate child
+      if (sibling.querySelector(`:scope > ${tagName}`) !== null) {
+        return true;
+      }
+    }
+    return false;
+  }
+
   disconnectedCallback() {
     this.onScrollEnd();