Allow calls to display edge-to-edge on mobile

By adding viewport-fit=cover to the <meta name="viewport"> header, the page now requests to be displayed edge-to-edge across the entire screen. This gives us control over what we display around camera cut-outs and system navigation UI, if the user agent supports it. I then adjusted the styles of various UI elements to ensure that they still lie within the screen's safe area.

index.html

@@ -10,7 +10,7 @@
 
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
+      content="viewport-fit=cover, width=device-width, initial-scale=1.0, maximum-scale=1.0"
     />
     <title><%- brand %></title>
     <script>

src/AppBar.module.css

@@ -1,10 +1,9 @@
 .bar {
-  block-size: 64px;
   flex-shrink: 0;
 }
 
 .bar > header {
-  position: absolute;
+  position: sticky;
   inset-inline: 0;
   inset-block-start: 0;
   block-size: 64px;

src/Header.module.css

@@ -12,7 +12,9 @@ Please see LICENSE in the repository root for full details.
   align-items: center;
   user-select: none;
   flex-shrink: 0;
-  padding-inline: var(--inline-content-inset);
+  padding-left: var(--content-inset-left);
+  padding-right: var(--content-inset-right);
+  padding-top: env(safe-area-inset-top);
 }
 
 .nav {

src/components/CallFooter.module.css

@@ -14,7 +14,11 @@ Please see LICENSE in the repository root for full details.
   grid-template-areas: ". buttons layout";
   align-items: center;
   gap: var(--cpd-space-3x);
-  padding: var(--cpd-space-10x) var(--cpd-space-6x);
+  /* Ensure that footer lies within the safe area */
+  padding-left: calc(env(safe-area-inset-left) + var(--cpd-space-6x));
+  padding-right: calc(env(safe-area-inset-right) + var(--cpd-space-6x));
+  padding-block: var(--cpd-space-10x)
+    calc(env(safe-area-inset-bottom) + var(--cpd-space-10x));
   background: linear-gradient(
     180deg,
     rgba(0, 0, 0, 0) 0%,
@@ -118,13 +122,15 @@ Once we exceed 500 we hide everything except the buttons.
 
 @media (max-height: 800px) {
   .footer {
-    padding-block: var(--cpd-space-8x);
+    padding-block: var(--cpd-space-8x)
+      calc(env(safe-area-inset-bottom) + var(--cpd-space-8x));
   }
 }
 
 @media (max-height: 400px) {
   .footer {
-    padding-block: var(--cpd-space-4x);
+    padding-block: var(--cpd-space-4x)
+      calc(env(safe-area-inset-bottom) + var(--cpd-space-4x));
   }
 }
 
@@ -140,7 +146,9 @@ Once we exceed 500 we hide everything except the buttons.
     }
     .footer {
       padding-block-start: var(--cpd-space-3x);
-      padding-block-end: var(--cpd-space-2x);
+      padding-block-end: calc(
+        env(safe-area-inset-bottom) + var(--cpd-space-2x)
+      );
     }
   }
 }

src/components/CallFooter.stories.tsx

@@ -157,6 +157,8 @@ export const UnavailableMediaDevices: Story = {
   ...Default,
   args: {
     ...Default.args,
+    audioEnabled: false,
+    videoEnabled: false,
     toggleAudio: undefined,
     toggleVideo: undefined,
     audioOutputSwitcher: undefined,

src/grid/Grid.tsx

@@ -266,6 +266,20 @@ export function Grid<
     }, []),
     useCallback(() => window.innerHeight, []),
   );
+  const orientation = useSyncExternalStore(
+    useCallback((onChange) => {
+      // Support for the change event is experimental
+      // https://developer.mozilla.org/en-US/docs/Web/API/Screen/change_event#browser_compatibility
+      (screen as unknown as EventTarget).addEventListener?.("change", onChange);
+      return (): void =>
+        (screen as unknown as EventTarget).removeEventListener?.(
+          "change",
+          onChange,
+        );
+    }, []),
+    useCallback(() => window.innerHeight, []),
+  );
+
   const [layoutRoot, setLayoutRoot] = useState<HTMLElement | null>(null);
   const [generation, setGeneration] = useState<number | null>(null);
   const [visibleTilesCallback, setVisibleTilesCallback] =
@@ -336,10 +350,10 @@ export function Grid<
     }
 
     return result;
-    // The rects may change due to the grid resizing or updating to a new
-    // generation, but eslint can't statically verify this
+    // The rects may change due to the grid resizing, changing orientation, or
+    // updating to a new generation, but eslint can't statically verify this
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [gridRoot, layoutRoot, tiles, gridBounds, generation]);
+  }, [gridRoot, layoutRoot, tiles, gridBounds, orientation, generation]);
 
   // The height of the portion of the grid visible at any given time
   const visibleHeight = useMemo(

src/grid/GridLayout.module.css

@@ -31,8 +31,9 @@ Please see LICENSE in the repository root for full details.
   position: absolute;
   inline-size: 404px;
   block-size: 233px;
-  inset-block: 0;
-  inset-inline: var(--cpd-space-3x);
+  /* Ensure that spotlight tile lies within the safe area */
+  inset: 0 calc(env(safe-area-inset-right) + var(--cpd-space-3x)) 0
+    calc(env(safe-area-inset-left) + var(--cpd-space-3x));
 }
 
 .fixed > .slot[data-block-alignment="start"] {

src/grid/SpotlightExpandedLayout.module.css

@@ -18,7 +18,11 @@ Please see LICENSE in the repository root for full details.
   position: absolute;
   inline-size: 135px;
   block-size: 160px;
-  inset: var(--cpd-space-4x);
+  /* Ensure that PiP lies within the safe area */
+  inset: calc(env(safe-area-inset-top) + var(--cpd-space-4x))
+    var(--content-inset-right)
+    calc(env(safe-area-inset-bottom) + var(--cpd-space-4x))
+    var(--content-inset-left);
 }
 
 @media (min-width: 600px) {

src/index.css

@@ -37,10 +37,20 @@ layer(compound);
   --cpd-color-border-accent: var(--cpd-color-green-800);
   /* The distance to inset non-full-width content from the edge of the window
   along the inline axis. This ramps up from 16px for typical mobile windows, to
-  96px for typical desktop windows. */
-  --inline-content-inset: min(
-    var(--cpd-space-24x),
-    max(var(--cpd-space-4x), calc((100vw - 900px) / 3))
+  96px for typical desktop windows, and accounts for the safe area. */
+  --content-inset-left: calc(
+    env(safe-area-inset-left) +
+      min(
+        var(--cpd-space-24x),
+        max(var(--cpd-space-4x), calc((100vw - 900px) / 3))
+      )
+  );
+  --content-inset-right: calc(
+    env(safe-area-inset-right) +
+      min(
+        var(--cpd-space-24x),
+        max(var(--cpd-space-4x), calc((100vw - 900px) / 3))
+      )
   );
   --small-drop-shadow: 0px 1.2px 2.4px 0px rgba(0, 0, 0, 0.15);
   --big-drop-shadow: 0px 0px 24px 0px #1b1d221a;

src/room/CallEndedView.module.css

@@ -57,7 +57,8 @@ Please see LICENSE in the repository root for full details.
   flex: 1;
   flex-direction: column;
   align-items: center;
-  padding-inline: var(--inline-content-inset);
+  padding-left: var(--content-inset-left);
+  padding-right: var(--content-inset-right);
 }
 
 .logo {

src/room/VideoPreview.module.css

@@ -6,7 +6,8 @@ Please see LICENSE in the repository root for full details.
 */
 
 .preview {
-  margin-inline: var(--inline-content-inset);
+  margin-left: var(--content-inset-left);
+  margin-right: var(--content-inset-right);
   min-block-size: 0;
   block-size: 50vh;
   border-radius: var(--cpd-space-4x);
@@ -80,6 +81,7 @@ video.mirror {
   }
 
   .buttonBar {
-    padding-inline: var(--inline-content-inset);
+    padding-left: var(--content-inset-left);
+    padding-right: var(--content-inset-right);
   }
 }

src/tile/SpotlightTile.module.css

@@ -33,6 +33,12 @@ Please see LICENSE in the repository root for full details.
   --media-view-fg-inset: 10px;
 }
 
+.maximised .item {
+  /* Ensure that foreground elements lie within the safe area */
+  --media-view-fg-inset: 10px calc(env(safe-area-inset-right) + 10px) 10px
+    calc(env(safe-area-inset-left) + 10px);
+}
+
 .item.snap {
   scroll-snap-align: start;
 }