You’re running into the expected behavior change between MABS 11 and MABS 12.

In MABS 12:

• The Cordova StatusBar plugin is deprecated/removed, so:
  • StatusBarOverlaysWebView and similar preferences no longer have any effect. RE: Change of Status Bar Color at Runtime for Each Screen in MABS 12
  • JS like window.StatusBar.* also stops working.
• Status bar behavior is now controlled by the new “edge‑to‑edge” system bars configuration instead of the old preferences. RE: Change of Status Bar Color at Runtime for Each Screen in MABS 12

Because of that, what used to be handled by StatusBarOverlaysWebView in MABS 11 is now handled by the new system bars model in MABS 12. If you simply upgraded MABS, your existing header (which was designed assuming the old status bar behavior) can end up visually “under” the iOS/iPadOS status bar, exactly like you’re seeing.

What you can do (beyond CSS hacks)

For MABS 12+, the supported approach is:

1. Configure system bars using “Customize the application system bars with edge‑to‑edge display”

   OutSystems’ recommended solution for MABS 12 is to move to the new system bars setup (edge‑to‑edge) using Extensibility Configurations. RE: Change of Status Bar Color at Runtime for Each Screen in MABS 12

   In your mobile app module:

   • Open the module properties.
   • Open Extensibility Configurations.
   • Replace any old StatusBarOverlaysWebView, StatusBarBackgroundColor, StatusBarStyle entries (these are for MABS 11). Customize the application status bar
   • Follow the configuration described in “Customize the application system bars with edge‑to‑edge display” (the document that OutSystems support pointed to in the MABS 12 thread you quoted). RE: Change of Status Bar Color at Runtime for Each Screen in MABS 12

   That article shows how to:

   • Decide whether content should go under the system bars (true edge‑to‑edge) or start below them.
   • Set the system bar colors to match your header.
   • Ensure safe‑area insets are honored so content (like your header title/actions) doesn’t sit behind the iOS status bar and notch.

   Once you align with this model and rebuild with MABS 12, the overlapping issue typically disappears without custom JS/plugins.

2. Make sure OutSystems UI is updated and aligned with MABS 12

   If you upgraded MABS but are using an older OutSystems UI version, the CSS and layout assumptions may not match the edge‑to‑edge / safe‑area behavior of newer runtimes. Customize the application status bar

   • Update the OutSystems UI dependency in your app.
   • Regenerate and install a fresh build with MABS 12.

3. Avoid relying on runtime status bar JS

   Since MABS 12 is moving to Capacitor and modern Android/iOS practices, runtime status bar color/overlay manipulation is no longer supported (as you saw in the other forum thread). RE: Change of Status Bar Color at Runtime for Each Screen in MABS 12
   You should instead:

   • Define system‑wide status bar behavior via Extensibility Configurations.
   • Design your header (and themes) with that fixed behavior in mind.

Summary

• What broke: old Cordova status bar preferences (like StatusBarOverlaysWebView) and JS no longer apply in MABS 12.
• Recommended fix (no custom CSS “hack” required):
  • Remove old status bar preferences from Extensibility Configurations.
  • Configure the new edge‑to‑edge system bars behavior for MABS 12 as per OutSystems’ documentation.
  • Update OutSystems UI and rebuild with MABS 12.

That’s the path OutSystems itself recommends and is what other customers have used successfully after moving from MABS 11.x to 12.