If a developer dynamically changes the height of a header or footer (e.g., expanding a searchbar, wrapping text) or adds a toolbar conditionally to the DOM (e.g., via *ngIf), the ion-content does not adjust. This results in content being obscured behind the header/footer.

What is the new behavior?

This PR adds a ResizeObserver and MutationObserver to ion-content to automatically handle dynamic layout changes.

ResizeObserver watches sibling and elements and triggers a recalculation of --offset-top and --offset-bottom whenever their dimensions change.

MutationObserver watches the parent element to detect when or elements are added to or removed from the DOM.

Removes the need for developers to manually listen for standard dynamic layout changes.

Does this introduce a breaking change?

Other information

I have added a new E2E test suite in core/src/components/content/test/auto-offset which covers:

Visual Regression: Ensures no regressions on initial load.
Functional Header: Expands a header dynamically and asserts that content --offset-top update correctly.
Functional Footer: Expands a footer dynamically and asserts that content --offset-bottom update correctly.
Visual Confirmation: Snapshots verify that the content is physically pushed down/up when toolbars expand.

Before:

After:

fix(content): automatically recalculate offset when header/footer cha…

ada35da

…ngesPreviously, ion-content only calculated layout offsets on initialization or window resize. This caused content to be covered or obscured if a header or footer's dimensions changed dynamically (e.g. expanding a searchbar) or if they were added conditionally to the DOM.This implementation adds a ResizeObserver to watch sibling headers/footers for size changes and a MutationObserver to detect when they are added, triggering an automatic recalculation of the --offset-top and --offset-bottom CSS variables.Fixesionic-team#26981