fix(ios): fill the full screen in standalone PWAs instead of a bottom chin (#1853)

<!-- Please read
https://github.com/SableClient/Sable/blob/dev/CONTRIBUTING.md before
submitting your pull request -->

### Description

<!-- Please include a summary of the change. Please also include
relevant motivation and context. List any dependencies that are required
for this change. -->

Fixes #

#### Type of change

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] This change requires a documentation update

### Checklist:

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings

### AI disclosure:

- [ ] Partially AI assisted (clarify which code was AI assisted and
briefly explain what it does).
- [ ] Fully AI generated (explain what all the generated code does in
moderate detail).
<!-- Write any explanation required here, but do not generate the
explanation using AI!! You must prove you understand what the code in
this PR does. -->

Author: eleboucher

src/app/styles/edgeToEdgeInsets.test.ts

@@ -79,24 +79,24 @@ describe('android edge-to-edge inset contract', () => {
     expect(mobileCapability).toContain('"edge-to-edge:default"');
   });
 
-  it('extends only standalone iOS PWAs to the dynamic viewport bottom', () => {
+  it('fills the full screen in standalone iOS PWAs unless the keyboard is open', () => {
     const indexCss = readWorkspaceFile('src/index.css');
     const indexTsx = readWorkspaceFile('src/index.tsx');
     const iosPwaViewport = readWorkspaceFile('src/app/utils/iosPwaViewport.ts');
 
     expect(indexCss).toContain('@media (display-mode: standalone)');
     expect(indexCss).toContain('@supports (-webkit-touch-callout: none)');
-    expect(indexCss).toContain('var(--sable-ios-pwa-viewport-height, 100dvh)');
+    expect(indexCss).toContain('var(--sable-ios-pwa-viewport-height, 100vh)');
     expect(indexTsx).toContain('installIosPwaViewportHeight();');
     expect(iosPwaViewport).toContain("window.matchMedia('(display-mode: standalone)').matches");
     expect(iosPwaViewport).toContain('viewport.height + viewport.offsetTop');
     expect(iosPwaViewport).toContain('window.setTimeout(updateHeight, 350)');
-    expect(iosPwaViewport).not.toContain('fullHeight');
-    expect(iosPwaViewport).not.toContain('viewportWidth');
+    expect(iosPwaViewport).toContain('100vh');
+    expect(iosPwaViewport).toContain('fullHeight');
+    // Physical screen geometry reports device pixels and is wrong on iPad.
     expect(iosPwaViewport).not.toContain('window.screen');
-    // The height must not depend on keyboard detection or on a stale window.innerHeight.
-    expect(iosPwaViewport).not.toContain('MIN_KEYBOARD_HEIGHT');
-    expect(iosPwaViewport).not.toContain('isEditableFocused');
+    expect(iosPwaViewport).toContain('MIN_KEYBOARD_HEIGHT');
+    expect(iosPwaViewport).toContain('isEditableFocused');
   });
 
   it('removes the scattered safe-area css consumers', () => {

src/app/utils/iosPwaViewport.ts

@@ -1,25 +1,60 @@
 const IOS_PWA_VIEWPORT_HEIGHT = '--sable-ios-pwa-viewport-height';
+const MIN_KEYBOARD_HEIGHT = 100;
 
 const isStandaloneIosPwa = (): boolean =>
   window.matchMedia('(display-mode: standalone)').matches &&
   CSS.supports('-webkit-touch-callout: none');
 
+const isEditableFocused = (): boolean => {
+  const el = document.activeElement as HTMLElement | null;
+  if (!el) return false;
+  return el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' || el.isContentEditable;
+};
+
+// 100vh is the only unit that includes the safe-area insets in installed PWAs; probe it so we
+// never depend on window.innerHeight, which iOS shrinks on the first keyboard open.
+function measureFullHeight(): number {
+  const probe = document.createElement('div');
+  probe.style.position = 'fixed';
+  probe.style.top = '0';
+  probe.style.left = '0';
+  probe.style.height = '100vh';
+  probe.style.visibility = 'hidden';
+  probe.style.pointerEvents = 'none';
+  document.documentElement.appendChild(probe);
+  const height = probe.offsetHeight;
+  probe.remove();
+  return height;
+}
+
 export function installIosPwaViewportHeight(): void {
   if (!isStandaloneIosPwa()) return;
 
   let frame = 0;
   let settleTimer = 0;
+  let fullHeight = measureFullHeight();
+  let viewportWidth = window.innerWidth;
 
   const updateHeight = () => {
     frame = 0;
+
+    // Re-probe after rotation.
+    if (window.innerWidth !== viewportWidth) {
+      viewportWidth = window.innerWidth;
+      fullHeight = measureFullHeight();
+    }
+
     const viewport = window.visualViewport;
     // Reach the bottom of the visible area. window.innerHeight is unusable here: iOS shrinks it
     // on the first keyboard open and never restores it until the app is force-quit.
-    const visibleBottom = viewport ? viewport.height + viewport.offsetTop : window.innerHeight;
+    const visibleBottom = viewport ? viewport.height + viewport.offsetTop : fullHeight;
+
+    // Only shrink above the keyboard; idle visualViewport heights under-report by the insets.
+    const keyboardOpen = isEditableFocused() && fullHeight - visibleBottom > MIN_KEYBOARD_HEIGHT;
 
     document.documentElement.style.setProperty(
       IOS_PWA_VIEWPORT_HEIGHT,
-      `${Math.round(visibleBottom)}px`
+      `${Math.round(keyboardOpen ? visibleBottom : fullHeight)}px`
     );
   };
 

src/index.css

@@ -63,7 +63,8 @@ body {
     html,
     body,
     #root {
-      height: var(--sable-ios-pwa-viewport-height, 100dvh);
+      /* 100vh is the only unit that includes the safe-area insets in installed PWAs */
+      height: var(--sable-ios-pwa-viewport-height, 100vh);
     }
   }
 }