Add iPadOS 26 window controls offset for Capacitor web view (#818)

iPadOS 26 shows traffic-light window controls in the top-left corner of
windowed apps. WKWebView does not expose this region via CSS env()
variables, so content (back buttons, hamburger menu) gets occluded.

An invisible observer view reads the corner adaptation margin from the
native UIView API and injects it as a --window-controls-left CSS custom
property.

The CSS variable is applied to ActionBar and EditCodeDialog and the model theme
(to avoid title overlap for full screen modals).

As noted on review it's not perfect for the navigation drawer but a big
improvement and let's us avoid the compat flag.

Author: microbit-matt-hillsdon

ios/App/App/AppDelegate.swift

@@ -1,10 +1,12 @@
 import UIKit
 import Capacitor
+import WebKit
 
 @UIApplicationMain
 class AppDelegate: UIResponder, UIApplicationDelegate {
 
     var window: UIWindow?
+    private var windowControlsObserver: WindowControlsObserver?
 
     func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
         // Override point for customization after application launch.
@@ -34,6 +36,32 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
               let webView = vc.webView else { return }
         webView.setNeedsLayout()
         webView.layoutIfNeeded()
+
+        setupWindowControlsObserver(webView: webView)
+    }
+
+    /// Adds an invisible view that tracks the iPadOS 26 window-controls
+    /// corner adaptation margin and injects it as a CSS variable.
+    private func setupWindowControlsObserver(webView: WKWebView) {
+        guard windowControlsObserver == nil,
+              let parent = webView.superview else { return }
+        let observer = WindowControlsObserver()
+        observer.attach(to: webView)
+        observer.translatesAutoresizingMaskIntoConstraints = false
+        observer.isUserInteractionEnabled = false
+        observer.alpha = 0
+        observer.isAccessibilityElement = false
+        observer.accessibilityElementsHidden = true
+        parent.insertSubview(observer, belowSubview: webView)
+        NSLayoutConstraint.activate([
+            observer.topAnchor.constraint(equalTo: webView.topAnchor),
+            observer.leadingAnchor.constraint(equalTo: webView.leadingAnchor),
+            observer.trailingAnchor.constraint(equalTo: webView.trailingAnchor),
+            observer.bottomAnchor.constraint(equalTo: webView.bottomAnchor),
+        ])
+        windowControlsObserver = observer
+        parent.layoutIfNeeded()
+        observer.injectWindowControlsInset()
     }
 
     func applicationWillTerminate(_ application: UIApplication) {
@@ -54,3 +82,53 @@ class AppDelegate: UIResponder, UIApplicationDelegate {
     }
 
 }
+
+/// Invisible view that observes layout changes to detect the iPadOS 26
+/// window-controls region and inject its width as a CSS custom property
+/// (`--window-controls-left`) into the Capacitor web view.
+///
+/// On older iOS versions or when window controls are absent the value is 0.
+private class WindowControlsObserver: UIView {
+    weak var webView: WKWebView?
+    private var lastLeft: CGFloat = -1
+    private var loadingObservation: NSKeyValueObservation?
+
+    func attach(to webView: WKWebView) {
+        self.webView = webView
+        // Re-inject after page reload (document.documentElement is replaced).
+        loadingObservation = webView.observe(\.isLoading) { [weak self] wv, _ in
+            if !wv.isLoading {
+                self?.lastLeft = -1
+                self?.injectWindowControlsInset()
+            }
+        }
+    }
+
+    override func layoutSubviews() {
+        super.layoutSubviews()
+        injectWindowControlsInset()
+    }
+
+    func injectWindowControlsInset() {
+        var left: CGFloat = 0
+        if #available(iOS 26.0, *) {
+            let corner = edgeInsets(
+                for: .margins(cornerAdaptation: .horizontal)
+            )
+            let base = edgeInsets(for: .margins())
+            // Only non-zero when window controls are actually present.
+            // Use the full corner value so the variable represents the
+            // complete inset from the window edge.
+            if corner.left > base.left {
+                left = corner.left
+            }
+        }
+        guard left != lastLeft else { return }
+        lastLeft = left
+        let px = Int(left)
+        let js = "document.documentElement.style.setProperty('--window-controls-left','\(px)px')"
+        DispatchQueue.main.async { [weak self] in
+            self?.webView?.evaluateJavaScript(js, completionHandler: nil)
+        }
+    }
+}

src/components/ActionBar/ActionBar.tsx

@@ -51,6 +51,7 @@ const ActionBar = ({
         gap={0}
         h="64px"
         w="100%"
+        sx={{ pl: "var(--window-controls-left, 0px)" }}
       >
         <HStack
           flex={itemsCenter ? { base: "0 1 max-content", xl: "1 0" } : "4 0"}

src/components/EditCodeDialog.tsx

@@ -59,7 +59,8 @@ const EditCodeDialog = forwardRef<MakeCodeFrameDriver, EditCodeDialogProps>(
         sx={{
           paddingTop: "env(safe-area-inset-top)",
           paddingBottom: "env(safe-area-inset-bottom)",
-          paddingLeft: "var(--safe-area-nav-left, 0px)",
+          paddingLeft:
+            "max(var(--window-controls-left, 0px), var(--safe-area-nav-left, 0px))",
           paddingRight: "var(--safe-area-nav-right, 0px)",
         }}
       >

src/deployment/default/components/modal.ts

@@ -51,6 +51,7 @@ const full = definePartsStyle({
   },
   header: {
     flexShrink: 0,
+    pl: "calc(var(--window-controls-left, 0px) + var(--chakra-space-6))",
   },
   body: {
     flex: 1,

workflow-config.json

@@ -1,3 +1,3 @@
 {
-  "theme-package-version": "0.2.0-beta.95"
+  "theme-package-version": "0.2.0-beta.96"
 }