From ce405fac0a37d991b1a303af9eadd5df2c42f132 Mon Sep 17 00:00:00 2001
From: pythonPlant12 <pythonplant12@gmail.com>
Date: Sun, 15 Nov 2026 00:39:19 +0100
Subject: [PATCH 1/2] feat(call): phone focus taps, separate call audio,
 on-screen-only video, full screen edges

- On a phone in portrait, a tap on a small tile puts that person on the big tile, and a tap on the big tile shows the grid of pages of 4; Grid now applies to a 1:1 call too.
- Play everyone's audio from CallAudio, apart from the tiles, so hiding the strip or a tile never silences anyone; tile videos are muted and render only while on screen.
- Keep the corner picture and the strip 0.5rem above the full screen controls and Add people, and clear of the notch and home indicator.
- Cover the status bar in a full screen portrait call in the app, and round a lone tile like the screen's corners.
- Lift the controls 0.25rem in full screen and keep 0.5rem above the home indicator.
- Slide in-place dropdowns open and closed with a shared Expand: Privacy, QR code, the phone panel's settings, and connection details.
---
 src/components/meeting-page/CallAudio.vue     | 57 +++++++++++
 .../meeting-page/CallPanelChoice.vue          | 50 +++++-----
 .../meeting-page/CallPhoneControls.vue        | 12 ++-
 .../meeting-page/MeetingAccessPicker.vue      | 81 ++++++++--------
 .../meeting-page/MeetingControls.vue          |  7 +-
 .../meeting-page/MeetingInviteContent.vue     |  8 +-
 .../meeting-page/MeetingMediaControl.vue      | 95 ++++++++++---------
 .../meeting-page/MeetingShareRow.vue          | 22 +++--
 .../meeting-page/ParticipantTile.vue          | 47 +++++----
 src/components/meeting-page/VideoGrid.vue     | 56 +++++++++--
 .../__tests__/CallPhoneControls.test.ts       |  8 ++
 .../__tests__/ParticipantTile.test.ts         | 21 ++++
 .../meeting-page/__tests__/VideoGrid.test.ts  | 63 +++++++++++-
 src/components/ui/expand/Expand.vue           | 43 +++++++++
 src/components/ui/expand/index.ts             |  1 +
 src/lib/__tests__/meeting-layout.test.ts      |  9 +-
 src/lib/meeting-layout.ts                     |  4 +-
 src/pages/MeetingPage.vue                     | 37 ++++++--
 18 files changed, 461 insertions(+), 160 deletions(-)
 create mode 100644 src/components/meeting-page/CallAudio.vue
 create mode 100644 src/components/ui/expand/Expand.vue
 create mode 100644 src/components/ui/expand/index.ts

diff --git a/src/components/meeting-page/CallAudio.vue b/src/components/meeting-page/CallAudio.vue
new file mode 100644
index 0000000..3b9d6d3
--- /dev/null
+++ b/src/components/meeting-page/CallAudio.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount } from 'vue';
+
+import type { Participant } from '@/xstate/machines/webrtc/types';
+
+// Everyone's audio, apart from the tiles: each other person, and each screen share with sound, plays from a hidden
+// audio element, so hiding a tile, scrolling it off a grid page or out of the strip, or collapsing the strip
+// never silences anyone. The tiles' own videos stay muted. A muted person sends no sound, so their element
+// plays silence.
+const props = defineProps<{ participants: readonly Participant[] }>();
+
+const sources = computed(() =>
+  props.participants.flatMap((participant) =>
+    !participant.isLocal && participant.stream ? [{ id: participant.id, stream: participant.stream }] : [],
+  ),
+);
+
+// A browser can block playback until the person interacts with the page; the next press anywhere retries.
+const blocked = new Set<HTMLAudioElement>();
+function retryBlocked() {
+  for (const element of blocked) void play(element);
+}
+async function play(element: HTMLAudioElement) {
+  try {
+    await element.play();
+    blocked.delete(element);
+  } catch {
+    if (!blocked.size) document.addEventListener('pointerdown', retryBlocked, { capture: true });
+    blocked.add(element);
+    return;
+  }
+  if (!blocked.size) document.removeEventListener('pointerdown', retryBlocked, { capture: true });
+}
+
+function attach(element: unknown, stream: MediaStream) {
+  if (!(element instanceof HTMLAudioElement) || element.srcObject === stream) return;
+  element.srcObject = stream;
+  void play(element);
+}
+
+onBeforeUnmount(() => {
+  blocked.clear();
+  document.removeEventListener('pointerdown', retryBlocked, { capture: true });
+});
+</script>
+
+<template>
+  <div class="hidden" aria-hidden="true" data-call-audio>
+    <audio
+      v-for="source in sources"
+      :key="source.id"
+      :ref="(element) => attach(element, source.stream)"
+      autoplay
+      :data-participant-id="source.id"
+    />
+  </div>
+</template>
diff --git a/src/components/meeting-page/CallPanelChoice.vue b/src/components/meeting-page/CallPanelChoice.vue
index 50f1b44..00e0137 100644
--- a/src/components/meeting-page/CallPanelChoice.vue
+++ b/src/components/meeting-page/CallPanelChoice.vue
@@ -2,6 +2,8 @@
 import { Check, ChevronDown } from 'lucide-vue-next';
 import { computed, useId } from 'vue';
 
+import { Expand } from '@/components/ui/expand';
+
 // One setting in the phone controls panel, such as a camera's source or quality: a row with the setting's name
 // over its current value, which expands in place to the choices.
 export interface CallPanelOption<V extends string> {
@@ -51,28 +53,30 @@ const current = computed(() => props.options.find((option) => option.value === p
         aria-hidden="true"
       />
     </button>
-    <div v-if="isOpen" :id="listId" role="radiogroup" :aria-label="label" class="pb-1">
-      <p v-if="!options.length && emptyText" class="px-3.5 py-2 text-sm text-harbor-muted">{{ emptyText }}</p>
-      <button
-        v-for="option in options"
-        :key="option.value"
-        type="button"
-        role="radio"
-        class="call-choice pl-6"
-        :aria-checked="option.value === value"
-        :data-state="option.value === value ? 'checked' : 'unchecked'"
-        :disabled="disabled"
-        v-bind="optionAttribute ? { [optionAttribute]: option.value } : {}"
-        @click="emit('select', option.value)"
-      >
-        <span class="min-w-0 flex-1 text-left">
-          <span class="block truncate">{{ option.label }}</span>
-          <span v-if="option.description" class="block text-xs font-normal text-harbor-muted">{{
-            option.description
-          }}</span>
-        </span>
-        <Check v-if="option.value === value" class="size-4 shrink-0" aria-hidden="true" />
-      </button>
-    </div>
+    <Expand :open="isOpen">
+      <div :id="listId" role="radiogroup" :aria-label="label" class="pb-1">
+        <p v-if="!options.length && emptyText" class="px-3.5 py-2 text-sm text-harbor-muted">{{ emptyText }}</p>
+        <button
+          v-for="option in options"
+          :key="option.value"
+          type="button"
+          role="radio"
+          class="call-choice pl-6"
+          :aria-checked="option.value === value"
+          :data-state="option.value === value ? 'checked' : 'unchecked'"
+          :disabled="disabled"
+          v-bind="optionAttribute ? { [optionAttribute]: option.value } : {}"
+          @click="emit('select', option.value)"
+        >
+          <span class="min-w-0 flex-1 text-left">
+            <span class="block truncate">{{ option.label }}</span>
+            <span v-if="option.description" class="block text-xs font-normal text-harbor-muted">{{
+              option.description
+            }}</span>
+          </span>
+          <Check v-if="option.value === value" class="size-4 shrink-0" aria-hidden="true" />
+        </button>
+      </div>
+    </Expand>
   </div>
 </template>
diff --git a/src/components/meeting-page/CallPhoneControls.vue b/src/components/meeting-page/CallPhoneControls.vue
index fc1bef2..e4a4fce 100644
--- a/src/components/meeting-page/CallPhoneControls.vue
+++ b/src/components/meeting-page/CallPhoneControls.vue
@@ -25,6 +25,11 @@ defineProps<{
   /** The call could not get the microphone or camera; its button shows a warning that asks again. */
   audioWarning?: boolean;
   videoWarning?: boolean;
+  /**
+   * Full screen sits the bar 0.25rem higher, so it clears the screen's edge with a little more room. Over the home
+   * indicator area (the OpenMeet app) the bar always keeps 0.5rem above the indicator.
+   */
+  fullscreen?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -163,7 +168,12 @@ function onLeave() {
 
 <template>
   <div
-    class="marketing-font pointer-events-none fixed inset-x-0 bottom-0 z-40 flex justify-center px-2 pb-[max(0.5rem,env(safe-area-inset-bottom))] text-harbor-ink"
+    class="marketing-font pointer-events-none fixed inset-x-0 bottom-0 z-40 flex justify-center px-2 text-harbor-ink"
+    :class="
+      fullscreen
+        ? 'pb-[calc(max(0.5rem,calc(env(safe-area-inset-bottom)+0.5rem))+0.25rem)]'
+        : 'pb-[max(0.5rem,calc(env(safe-area-inset-bottom)+0.5rem))]'
+    "
   >
     <!-- While the panel is open, a tap anywhere else only closes it and presses nothing underneath. -->
     <div
diff --git a/src/components/meeting-page/MeetingAccessPicker.vue b/src/components/meeting-page/MeetingAccessPicker.vue
index 072c59a..8f6b54a 100644
--- a/src/components/meeting-page/MeetingAccessPicker.vue
+++ b/src/components/meeting-page/MeetingAccessPicker.vue
@@ -2,6 +2,7 @@
 import { Check, ChevronDown } from 'lucide-vue-next';
 import { computed, ref, useId, watch } from 'vue';
 
+import { Expand } from '@/components/ui/expand';
 import { Input } from '@/components/ui/input';
 import { LoadingRipple } from '@/components/ui/loading';
 import { MEETING_ACCESS_OPTIONS, meetingAccessOption } from '@/config/meeting-access.config';
@@ -95,48 +96,50 @@ watch(isOpen, (open) => {
         aria-hidden="true"
       />
     </component>
-    <div v-if="editable && isOpen" :id="listId" class="px-3 pb-3" data-host-access>
-      <div class="call-choice-list" role="radiogroup" aria-label="Privacy">
-        <button
-          v-for="option in MEETING_ACCESS_OPTIONS"
-          :key="option.value"
-          type="button"
-          role="radio"
-          class="call-choice"
-          :aria-checked="option.value === draftPolicy"
-          :disabled="saving"
-          :data-access-option="option.value"
-          @click="choose(option.value)"
-        >
-          <component :is="option.icon" class="size-4 shrink-0 text-harbor-icon" aria-hidden="true" />
-          <span class="min-w-0 flex-1 text-left">
-            <span class="block truncate">{{ option.label }}</span>
-            <span class="block text-xs font-normal text-harbor-muted">{{ option.description }}</span>
-          </span>
-          <Check v-if="option.value === draftPolicy" class="size-4 shrink-0" aria-hidden="true" />
-        </button>
-        <form v-if="draftPolicy === 'password'" class="flex gap-2 px-3.5 py-3" @submit.prevent="savePassword">
-          <Input
-            id="meeting-access-password"
-            v-model="password"
-            type="password"
-            autocomplete="new-password"
-            maxlength="256"
-            aria-label="Meeting password"
-            :disabled="saving"
-            :placeholder="hasPassword ? 'New password, or empty to keep it' : 'At least 4 characters'"
-            class="h-9 min-w-0 flex-1 rounded-lg border-harbor-line bg-harbor-canvas text-sm focus-visible:ring-0"
-          />
+    <Expand v-if="editable" :open="isOpen">
+      <div :id="listId" class="px-3 pb-3" data-host-access>
+        <div class="call-choice-list" role="radiogroup" aria-label="Privacy">
           <button
-            type="submit"
-            class="call-button call-chip h-9 w-auto shrink-0 px-4 text-sm font-semibold"
-            :disabled="!canSavePassword"
-            data-save-access-password
+            v-for="option in MEETING_ACCESS_OPTIONS"
+            :key="option.value"
+            type="button"
+            role="radio"
+            class="call-choice"
+            :aria-checked="option.value === draftPolicy"
+            :disabled="saving"
+            :data-access-option="option.value"
+            @click="choose(option.value)"
           >
-            Save
+            <component :is="option.icon" class="size-4 shrink-0 text-harbor-icon" aria-hidden="true" />
+            <span class="min-w-0 flex-1 text-left">
+              <span class="block truncate">{{ option.label }}</span>
+              <span class="block text-xs font-normal text-harbor-muted">{{ option.description }}</span>
+            </span>
+            <Check v-if="option.value === draftPolicy" class="size-4 shrink-0" aria-hidden="true" />
           </button>
-        </form>
+          <form v-if="draftPolicy === 'password'" class="flex gap-2 px-3.5 py-3" @submit.prevent="savePassword">
+            <Input
+              id="meeting-access-password"
+              v-model="password"
+              type="password"
+              autocomplete="new-password"
+              maxlength="256"
+              aria-label="Meeting password"
+              :disabled="saving"
+              :placeholder="hasPassword ? 'New password, or empty to keep it' : 'At least 4 characters'"
+              class="h-9 min-w-0 flex-1 rounded-lg border-harbor-line bg-harbor-canvas text-sm focus-visible:ring-0"
+            />
+            <button
+              type="submit"
+              class="call-button call-chip h-9 w-auto shrink-0 px-4 text-sm font-semibold"
+              :disabled="!canSavePassword"
+              data-save-access-password
+            >
+              Save
+            </button>
+          </form>
+        </div>
       </div>
-    </div>
+    </Expand>
   </div>
 </template>
diff --git a/src/components/meeting-page/MeetingControls.vue b/src/components/meeting-page/MeetingControls.vue
index dfb83f0..344ec28 100644
--- a/src/components/meeting-page/MeetingControls.vue
+++ b/src/components/meeting-page/MeetingControls.vue
@@ -76,8 +76,11 @@ function onLeave() {
   <!-- Solid trays: [mic▾ camera▾] [share ⋮] then Leave in red, with invite on the far left and Full screen on the far
        right. -->
   <div
-    class="marketing-font pointer-events-none fixed inset-x-0 bottom-4 z-40 flex items-center justify-center gap-2 text-harbor-ink sm:bottom-6"
-    :class="{ 'meeting-controls-dark': dark }"
+    class="marketing-font pointer-events-none fixed inset-x-0 z-40 flex items-center justify-center gap-2 text-harbor-ink"
+    :class="[
+      fullscreen ? 'bottom-[1.25rem] sm:bottom-[1.75rem]' : 'bottom-4 sm:bottom-6',
+      { 'meeting-controls-dark': dark },
+    ]"
     data-meeting-controls
   >
     <div class="call-tray pointer-events-auto" data-controls-group="media">
diff --git a/src/components/meeting-page/MeetingInviteContent.vue b/src/components/meeting-page/MeetingInviteContent.vue
index 3d80509..e650927 100644
--- a/src/components/meeting-page/MeetingInviteContent.vue
+++ b/src/components/meeting-page/MeetingInviteContent.vue
@@ -167,7 +167,13 @@ watch(policy, () => {
           class="h-11 rounded-xl border border-harbor-line bg-harbor-canvas pl-9 text-sm focus-visible:ring-0"
         />
       </div>
-      <MeetingAccessPicker class="shrink-0" :policy="policy" :editable="isHost" :saving="isSavingAccess" @save="saveAccess" />
+      <MeetingAccessPicker
+        class="shrink-0"
+        :policy="policy"
+        :editable="isHost"
+        :saving="isSavingAccess"
+        @save="saveAccess"
+      />
       <div
         v-if="!guest"
         class="min-h-24 rounded-2xl bg-harbor-hover"
diff --git a/src/components/meeting-page/MeetingMediaControl.vue b/src/components/meeting-page/MeetingMediaControl.vue
index ba527ce..d99e92e 100644
--- a/src/components/meeting-page/MeetingMediaControl.vue
+++ b/src/components/meeting-page/MeetingMediaControl.vue
@@ -27,6 +27,7 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import { Expand } from '@/components/ui/expand';
 import LiquidMenuIcon from '@/components/ui/liquid-menu/LiquidMenuIcon.vue';
 import { type MediaKind, useMeetingMediaSettings } from '@/composables/useMeetingMediaSettings';
 import { VIDEO_QUALITY_OPTIONS } from '@/lib/video-quality';
@@ -203,56 +204,58 @@ onBeforeUnmount(stopLevelMeter);
           aria-hidden="true"
         />
       </button>
-      <div v-if="isExpanded" class="px-3 pb-3" data-media-options>
-        <div class="call-choice-list">
-          <CallPanelChoice
-            v-bind="choiceModel('source')"
-            :label="t('meeting.controls.source')"
-            :options="deviceOptions"
-            :value="activeId"
-            :disabled="busy"
-            :empty-text="t(isAudio ? 'meeting.controls.noMicrophones' : 'meeting.controls.noCameras')"
-            option-attribute="data-device-option"
-            data-media-source
-            @select="selectDevice"
-          />
-          <template v-if="isAudio">
+      <Expand :open="isExpanded">
+        <div class="px-3 pb-3" data-media-options>
+          <div class="call-choice-list">
             <CallPanelChoice
-              v-if="canChooseSpeaker && speakers.length"
-              v-bind="choiceModel('speaker')"
-              :label="t('meeting.controls.speaker')"
-              :options="speakerOptions"
-              :value="speakerId"
-              option-attribute="data-speaker-option"
-              data-media-speaker
-              @select="selectSpeaker"
-            />
-            <MeetingInputVolume
-              class="!px-3.5 !py-3"
-              :volume-percent="volumePercent"
-              :level-percent="levelPercent"
-              @change="onVolumeChange"
-            />
-          </template>
-          <template v-else>
-            <CallPanelChoice
-              v-bind="choiceModel('quality')"
-              :label="t('meeting.controls.quality')"
-              :options="qualityOptions"
-              :value="quality"
+              v-bind="choiceModel('source')"
+              :label="t('meeting.controls.source')"
+              :options="deviceOptions"
+              :value="activeId"
               :disabled="busy"
-              option-attribute="data-quality-option"
-              data-media-quality
-              @select="changeQuality"
+              :empty-text="t(isAudio ? 'meeting.controls.noMicrophones' : 'meeting.controls.noCameras')"
+              option-attribute="data-device-option"
+              data-media-source
+              @select="selectDevice"
             />
-            <button type="button" class="call-choice" data-preview-camera @click="emit('preview-camera')">
-              <ScanFace class="size-4 shrink-0 text-harbor-icon" aria-hidden="true" />
-              <span class="flex-1 text-left">{{ t('meeting.controls.previewCamera') }}</span>
-            </button>
-          </template>
-          <slot name="extra" />
+            <template v-if="isAudio">
+              <CallPanelChoice
+                v-if="canChooseSpeaker && speakers.length"
+                v-bind="choiceModel('speaker')"
+                :label="t('meeting.controls.speaker')"
+                :options="speakerOptions"
+                :value="speakerId"
+                option-attribute="data-speaker-option"
+                data-media-speaker
+                @select="selectSpeaker"
+              />
+              <MeetingInputVolume
+                class="!px-3.5 !py-3"
+                :volume-percent="volumePercent"
+                :level-percent="levelPercent"
+                @change="onVolumeChange"
+              />
+            </template>
+            <template v-else>
+              <CallPanelChoice
+                v-bind="choiceModel('quality')"
+                :label="t('meeting.controls.quality')"
+                :options="qualityOptions"
+                :value="quality"
+                :disabled="busy"
+                option-attribute="data-quality-option"
+                data-media-quality
+                @select="changeQuality"
+              />
+              <button type="button" class="call-choice" data-preview-camera @click="emit('preview-camera')">
+                <ScanFace class="size-4 shrink-0 text-harbor-icon" aria-hidden="true" />
+                <span class="flex-1 text-left">{{ t('meeting.controls.previewCamera') }}</span>
+              </button>
+            </template>
+            <slot name="extra" />
+          </div>
         </div>
-      </div>
+      </Expand>
     </template>
 
     <template v-else>
diff --git a/src/components/meeting-page/MeetingShareRow.vue b/src/components/meeting-page/MeetingShareRow.vue
index c08465f..7952c86 100644
--- a/src/components/meeting-page/MeetingShareRow.vue
+++ b/src/components/meeting-page/MeetingShareRow.vue
@@ -4,6 +4,7 @@ import QRCode from 'qrcode';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import { Expand } from '@/components/ui/expand';
 import { emailShareUrl, meetingLink, telegramShareUrl, whatsAppShareUrl } from '@/lib/meeting-share';
 
 // The invite's row of share targets. Share opens the system share sheet and shows only where one exists.
@@ -32,12 +33,15 @@ async function copyLink() {
   copiedTimer = window.setTimeout(() => (isCopied.value = false), 2000);
 }
 
+// The code is made once and kept, so it stays in view while it slides closed.
+const isQrOpen = ref(false);
 async function toggleQrCode() {
-  if (qrCode.value) {
-    qrCode.value = null;
+  if (isQrOpen.value) {
+    isQrOpen.value = false;
     return;
   }
-  qrCode.value = await QRCode.toDataURL(link(), { margin: 1, width: 240 });
+  qrCode.value ??= await QRCode.toDataURL(link(), { margin: 1, width: 240 });
+  isQrOpen.value = true;
 }
 
 const openWhatsApp = () => window.open(whatsAppShareUrl(shareText()), '_blank');
@@ -46,7 +50,7 @@ const emailUrl = () => emailShareUrl(t('meeting.controls.shareTitle'), shareText
 </script>
 
 <template>
-  <div class="space-y-3">
+  <div>
     <!-- One row that scrolls sideways on its own, with no scrollbar, when the targets do not fit. It stays inside
          the sheet's width, so the sheet itself only scrolls up and down. -->
     <div
@@ -63,7 +67,7 @@ const emailUrl = () => emailShareUrl(t('meeting.controls.shareTitle'), shareText
       <button
         type="button"
         class="call-share-target"
-        :aria-pressed="!!qrCode"
+        :aria-pressed="isQrOpen"
         data-share-target="qr"
         @click="toggleQrCode"
       >
@@ -79,8 +83,10 @@ const emailUrl = () => emailShareUrl(t('meeting.controls.shareTitle'), shareText
         <span class="call-share-icon"><Mail /></span>{{ t('meeting.invite.email') }}
       </a>
     </div>
-    <div v-if="qrCode" class="flex justify-center" data-share-qr>
-      <img :src="qrCode" :alt="t('meeting.invite.qrAlt')" class="size-48 rounded-2xl bg-white p-2" />
-    </div>
+    <Expand :open="isQrOpen">
+      <div class="flex justify-center pt-3" data-share-qr>
+        <img v-if="qrCode" :src="qrCode" :alt="t('meeting.invite.qrAlt')" class="size-48 rounded-2xl bg-white p-2" />
+      </div>
+    </Expand>
   </div>
 </template>
diff --git a/src/components/meeting-page/ParticipantTile.vue b/src/components/meeting-page/ParticipantTile.vue
index fe34657..a65956f 100644
--- a/src/components/meeting-page/ParticipantTile.vue
+++ b/src/components/meeting-page/ParticipantTile.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { MaximizeAnimated, MinimizeAnimated, PinAnimated, PinOffAnimated } from '@respeak/lucide-motion-vue';
+import { useElementBounding, useElementVisibility, useWindowSize } from '@vueuse/core';
 import { Eye, EyeOff, MonitorUp } from 'lucide-vue-next';
-import { useElementBounding, useWindowSize } from '@vueuse/core';
 import { computed, nextTick, onMounted, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -46,15 +46,17 @@ interface Props {
   /** The call controls are hidden, so the name tag shrinks to the mic-off icon. */
   collapsed?: boolean;
   /**
-   * The tile is off screen, such as on another grid page: it keeps playing the person's audio but drops their
-   * video, so the device does not render cameras nobody sees.
+   * The tile is off screen, such as on another grid page: it drops the person's video, so the device does not
+   * render cameras nobody sees. Their audio plays from the call's audio layer (CallAudio), not from the tile.
    */
-  audioOnly?: boolean;
+  offscreen?: boolean;
   /**
    * How much of the screen's bottom the full screen call controls cover, as a CSS length, while they show. The
    * name tag rises so it stays above them.
    */
   controlsReserve?: string;
+  /** The tile's corner radius as a CSS length, such as one that follows a phone's rounded screen; 1.4rem if unset. */
+  cornerRadius?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -71,8 +73,9 @@ const props = withDefaults(defineProps<Props>(), {
   isFullscreen: false,
   nameToggle: false,
   collapsed: false,
-  audioOnly: false,
+  offscreen: false,
   controlsReserve: undefined,
+  cornerRadius: undefined,
 });
 const { t } = useI18n();
 
@@ -92,13 +95,13 @@ const isOptionsOpen = ref(false);
 const videoRef = ref<HTMLVideoElement | null>(null);
 // A remote camera is "loading" from joining until its first frame renders.
 const hasVideoFrames = ref(false);
-// An audio-only tile plays a stream with just the audio tracks, so its video track has nothing to render into.
-const mediaStream = computed(() => {
-  const stream = props.participant.stream;
-  if (!stream || !props.audioOnly) return stream;
-  return new MediaStream(stream.getAudioTracks());
-});
-const showsVideo = computed(() => props.participant.videoEnabled && !props.audioOnly);
+// Video renders only while the tile is on screen: not on another grid page (`offscreen`) and not scrolled out of
+// the strip or the grid, which clip it. The tile's video is always muted; everyone's audio plays from CallAudio.
+const tileRoot = ref<HTMLElement | null>(null);
+const isOnScreen = useElementVisibility(tileRoot, { initialValue: true });
+const rendersVideo = computed(() => !props.offscreen && isOnScreen.value);
+const mediaStream = computed(() => (rendersVideo.value ? props.participant.stream : null));
+const showsVideo = computed(() => props.participant.videoEnabled && rendersVideo.value);
 const isMediaLoading = computed(
   () =>
     !props.participant.isLocal &&
@@ -126,7 +129,7 @@ const playAttachedVideo = async () => {
   try {
     await video.play();
   } catch {
-    // Ignore autoplay errors. Browser policy can require a user gesture for audio.
+    // Ignore autoplay errors; a muted video normally plays at once.
     console.log(`[ParticipantTile] Autoplay may be blocked for ${props.participant.name}`);
   }
 };
@@ -160,7 +163,6 @@ const statusOption = computed(() => (props.status ? userStatusOption(props.statu
 const showsNameTag = computed(() => props.showNameTag && (!props.collapsed || !props.participant.audioEnabled));
 // Over the full screen controls the tag rises by the part of the controls that overlaps this tile, measured from
 // the tile's bottom edge to the screen's, so tiles higher up keep their tag in place.
-const tileRoot = ref<HTMLElement | null>(null);
 const { bottom: tileBottom, update: measureTile } = useElementBounding(tileRoot);
 const { height: windowHeight } = useWindowSize();
 watch(
@@ -191,6 +193,13 @@ const isCompact = computed(() => props.size === 'sidebar' || props.size === 'mob
 // video with no gap at the corners. Phone webviews do not always clip a video to its parent's corners, so the
 // video and the layers over it carry the curve themselves.
 const innerRadiusClass = computed(() => (props.bleed ? 'rounded-none' : 'rounded-[calc(1.4rem-2px)]'));
+// A custom radius overrides both curves inline.
+const outerRadiusStyle = computed(() =>
+  props.cornerRadius && !props.bleed ? { borderRadius: props.cornerRadius } : undefined,
+);
+const innerRadiusStyle = computed(() =>
+  props.cornerRadius && !props.bleed ? { borderRadius: `calc(${props.cornerRadius} - 2px)` } : undefined,
+);
 
 // Screens are never cropped or mirrored, so their text stays whole and readable.
 const isScreen = computed(() => !!props.participant.screenShareOf);
@@ -204,6 +213,8 @@ const surfaceClass = computed(() => (props.dark ? 'bg-[#161C1E]' : 'bg-harbor-li
 const attachStream = async () => {
   await nextTick();
   const stream = mediaStream.value;
+  // An off-screen tile lets go of the stream, so its video stops decoding.
+  if (videoRef.value && !stream) videoRef.value.srcObject = null;
   if (videoRef.value && stream) {
     // Only set srcObject if it's different from what's currently set
     if (videoRef.value.srcObject !== stream) {
@@ -271,6 +282,7 @@ onMounted(async () => {
           : '',
         pressed ? 'scale-[0.97] duration-100' : '',
       ]"
+      :style="outerRadiusStyle"
       data-participant-surface
       :aria-label="
         interactive
@@ -284,7 +296,7 @@ onMounted(async () => {
       @pointerleave="pressed = false"
       @click="interactive && emit('click')"
     >
-      <!-- Video element (always present for audio playback, hidden when video disabled) -->
+      <!-- The camera, hidden while it is off. Muted: everyone's audio plays from CallAudio. -->
       <video
         v-if="participant.stream"
         ref="videoRef"
@@ -293,7 +305,7 @@ onMounted(async () => {
         :data-participant-local="participant.isLocal"
         autoplay
         playsinline
-        :muted="participant.isLocal"
+        :muted="true"
         @loadedmetadata="
           reportAspect();
           playAttachedVideo();
@@ -309,6 +321,7 @@ onMounted(async () => {
           objectFitClass,
           { hidden: !showsVideo, '-scale-x-100': participant.isLocal && !isScreen },
         ]"
+        :style="innerRadiusStyle"
       />
 
       <!-- Avatar (shown when no stream or video disabled) -->
@@ -317,6 +330,7 @@ onMounted(async () => {
         data-participant-avatar
         class="absolute inset-0 flex items-center justify-center"
         :class="[surfaceClass, innerRadiusClass]"
+        :style="innerRadiusStyle"
       >
         <div
           :class="[
@@ -336,6 +350,7 @@ onMounted(async () => {
         data-participant-loading
         class="absolute inset-0 flex flex-col items-center justify-center gap-2 text-harbor-accent backdrop-blur-[2px]"
         :class="[dark ? 'bg-[#161C1E]/70' : 'bg-harbor-line/70', innerRadiusClass]"
+        :style="innerRadiusStyle"
         role="status"
       >
         <LoadingRipple :size="isCompact ? 'sm' : 'lg'" />
diff --git a/src/components/meeting-page/VideoGrid.vue b/src/components/meeting-page/VideoGrid.vue
index 7635fe9..124a3c7 100644
--- a/src/components/meeting-page/VideoGrid.vue
+++ b/src/components/meeting-page/VideoGrid.vue
@@ -22,6 +22,7 @@ import { swallowNextClick } from '@/lib/swallow-next-click';
 import type { UserStatus } from '@/services/social-api';
 import type { Participant } from '@/xstate/machines/webrtc/types';
 
+import CallAudio from './CallAudio.vue';
 import ParticipantTile from './ParticipantTile.vue';
 
 const props = defineProps<{
@@ -51,6 +52,8 @@ const emit = defineEmits<{
   longPress: [];
   /** A vertical swipe on the video area, such as to show or hide the controls in full screen. */
   swipe: [direction: 'up' | 'down'];
+  /** A tap on the big tile of a phone in portrait, which shows everyone in the grid. */
+  showGrid: [];
 }>();
 const { t } = useI18n();
 
@@ -84,6 +87,13 @@ const formFactor = useCallFormFactor();
 const isPhone = computed(() => formFactor.value !== 'desktop');
 // Phones shrink name tags to the mic-off icon while the controls hide; desktop keeps names readable at all times.
 const collapsesNameTags = computed(() => !!props.controlsHidden && isPhone.value);
+// A lone grid tile in full screen on a phone in portrait sits 0.5rem in from the screen's rounded corners, so its
+// own corners follow them (the app sets --device-corner-radius; elsewhere it keeps the usual 1.4rem).
+const loneTileRadius = computed(() =>
+  props.fullscreen && formFactor.value === 'phone-portrait' && gridParticipants.value.length === 1
+    ? 'max(1.4rem, calc(var(--device-corner-radius, 0px) - 0.5rem))'
+    : undefined,
+);
 // In full screen the controls (and a phone's "Add people" card) float over the tiles, so name tags near the
 // bottom rise to just above them (by 0.5rem) while they show. The page sets --call-bottom-chrome to their top edge.
 const nameTagReserve = computed(() =>
@@ -162,7 +172,7 @@ const gridContentStyle = computed(() =>
 watch(gridPageCount, (count) => {
   if (gridPage.value > count - 1) showGridPage(count - 1);
 });
-// Only the shown page plays video; tiles on other pages keep their audio (see `audioOnly` on the tile).
+// Only the shown page plays video; everyone's audio plays from CallAudio (see `offscreen` on the tile).
 const isOffPage = (index: number) => isGridPaged.value && Math.floor(index / PHONE_GRID_PAGE_SIZE) !== gridPage.value;
 function showGridPage(page: number) {
   const target = Math.min(gridPageCount.value - 1, Math.max(0, page));
@@ -266,14 +276,28 @@ let selfViewDrag: {
   areaHeight: number;
 } | null = null;
 const selfViewOffset = ref<{ x: number; y: number } | null>(null);
+// In full screen the corner picture covers the whole screen's corners, so it keeps clear of the notch and the
+// home indicator, and, while the controls show, sits below the top bar and above the controls (and a phone's
+// "Add people" card), sliding with them.
+const selfViewEdges = computed(() => {
+  if (!props.fullscreen) return { top: `${SELF_VIEW_INSET}px`, bottom: `${SELF_VIEW_INSET}px` };
+  if (props.controlsShown) return { top: 'var(--call-area-top)', bottom: 'calc(var(--call-bottom-chrome) + 0.5rem)' };
+  return {
+    top: `calc(env(safe-area-inset-top) + ${SELF_VIEW_INSET}px)`,
+    bottom: `calc(env(safe-area-inset-bottom) + ${SELF_VIEW_INSET}px)`,
+  };
+});
 const selfViewStyle = computed(() => {
   const [vertical, horizontal] = selfViewCorner.value.split('-');
   const left = horizontal === 'left' ? SELF_VIEW_INSET : selfAreaWidth.value - selfViewWidth.value - SELF_VIEW_INSET;
-  const top = vertical === 'top' ? SELF_VIEW_INSET : selfAreaHeight.value - selfViewHeight.value - SELF_VIEW_INSET;
+  const top =
+    vertical === 'top'
+      ? selfViewEdges.value.top
+      : `calc(${selfAreaHeight.value - selfViewHeight.value}px - ${selfViewEdges.value.bottom})`;
   const offset = selfViewOffset.value;
   return {
     left: `${left}px`,
-    top: `${top}px`,
+    top,
     width: `${selfViewWidth.value}px`,
     height: `${selfViewHeight.value}px`,
     transform: offset ? `translate(${offset.x}px, ${offset.y}px)` : undefined,
@@ -321,7 +345,7 @@ function endSelfViewDrag(event: PointerEvent) {
   if (event.type === 'pointerup') swallowNextClick();
 }
 
-// One tap on a tile pins or unpins that person; a double tap anywhere toggles full screen. The single tap waits
+// One tap on a tile acts on that person (see `tapTile`); a double tap anywhere toggles full screen. The single tap waits
 // a moment so a double tap does not also pin. Keyboard presses (no pointer detail) act at once. A touch held
 // still for `LONG_PRESS_MS` anywhere on the video area is a long-press instead, so its click does nothing.
 let lastTapAt = 0;
@@ -374,11 +398,20 @@ function handleCanvasTouchMove(event: TouchEvent) {
 function handleCanvasTouchEnd() {
   swipeStart = null;
 }
+// A phone in portrait moves between the big tile and everyone: a small tile (the corner picture or one in the
+// strip) takes the big tile, and the big tile hands over to the grid of pages of 4. Elsewhere a tap pins or
+// unpins the person.
+function tapTile(participantId: string) {
+  const current = layout.value;
+  const isMainTile = (current.kind === 'speaker' || current.kind === 'self-view') && current.mainId === participantId;
+  if (formFactor.value === 'phone-portrait' && isMainTile) emit('showGrid');
+  else emit('togglePin', participantId);
+}
 function handleCanvasClick(event: MouseEvent) {
   const participantId = (event.target as Element | null)?.closest<HTMLElement>('[data-testid="participant-tile"]')
     ?.dataset.participantId;
   if (event.detail === 0) {
-    if (participantId) emit('togglePin', participantId);
+    if (participantId) tapTile(participantId);
     return;
   }
   if (longPressFired) {
@@ -398,7 +431,7 @@ function handleCanvasClick(event: MouseEvent) {
   pendingTap = participantId
     ? window.setTimeout(() => {
         pendingTap = undefined;
-        emit('togglePin', participantId);
+        tapTile(participantId);
       }, DOUBLE_TAP_MS)
     : undefined;
 }
@@ -446,6 +479,8 @@ function toggleName(participantId: string) {
     @touchcancel="handleCanvasTouchEnd"
     @click="handleCanvasClick"
   >
+    <!-- Everyone's audio, whatever the layout shows or hides. -->
+    <CallAudio :participants="participants" />
     <!-- The video area fills the space between the call screen's top bar and its controls, which the page sets as
          --call-area-top and --call-area-bottom, so no tile hides under either. In full screen it takes the whole
          screen. -->
@@ -496,9 +531,10 @@ function toggleName(participantId: string) {
                 :dark="fullscreen"
                 :collapsed="collapsesNameTags"
                 :controls-reserve="nameTagReserve"
+                :corner-radius="loneTileRadius"
                 fit="cover"
                 size="grid"
-                :audio-only="isOffPage(index)"
+                :offscreen="isOffPage(index)"
                 :is-expanded="pinnedParticipantId === participant.id"
                 :is-fullscreen="isTileFullscreen(participant)"
                 @aspect="setAspect(participant.id, $event)"
@@ -666,7 +702,11 @@ function toggleName(participantId: string) {
           <div
             v-if="showsStrip"
             class="pointer-events-none absolute inset-x-0 flex justify-center px-3 transition-[bottom] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]"
-            :class="fullscreen && controlsShown ? 'bottom-[var(--call-area-bottom)]' : 'bottom-4 sm:bottom-6'"
+            :class="
+              fullscreen && controlsShown
+                ? 'bottom-[calc(var(--call-bottom-chrome)+0.5rem)]'
+                : 'bottom-[calc(env(safe-area-inset-bottom)+1rem)] sm:bottom-6'
+            "
           >
             <div
               class="pointer-events-auto max-w-full snap-x snap-mandatory overflow-x-auto overscroll-x-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
diff --git a/src/components/meeting-page/__tests__/CallPhoneControls.test.ts b/src/components/meeting-page/__tests__/CallPhoneControls.test.ts
index 68a847e..004f34c 100644
--- a/src/components/meeting-page/__tests__/CallPhoneControls.test.ts
+++ b/src/components/meeting-page/__tests__/CallPhoneControls.test.ts
@@ -71,6 +71,14 @@ describe('CallPhoneControls', () => {
     ).toEqual(['toggle', 'toggle']);
   });
 
+  it('keeps 0.5rem between the bar and the home indicator, and 0.25rem more in full screen', async () => {
+    const wrapper = mountControls();
+    const padding = () => wrapper.classes().find((name) => name.startsWith('pb-')) ?? '';
+    expect(padding()).toBe('pb-[max(0.5rem,calc(env(safe-area-inset-bottom)+0.5rem))]');
+    await wrapper.setProps({ fullscreen: true });
+    expect(padding()).toContain('+0.25rem)]');
+  });
+
   it('shows share only where the screen can be shared', () => {
     expect(mountControls().find('[data-stub-share]').exists()).toBe(false);
   });
diff --git a/src/components/meeting-page/__tests__/ParticipantTile.test.ts b/src/components/meeting-page/__tests__/ParticipantTile.test.ts
index b5d1e09..c048488 100644
--- a/src/components/meeting-page/__tests__/ParticipantTile.test.ts
+++ b/src/components/meeting-page/__tests__/ParticipantTile.test.ts
@@ -245,3 +245,24 @@ describe('ParticipantTile interactions', () => {
     expect(tile.find('button[aria-label="Options for Ada Lovelace"]').exists()).toBe(false);
   });
 });
+
+describe('ParticipantTile video', () => {
+  const stream = { getTracks: () => [], getAudioTracks: () => [], getVideoTracks: () => [] } as unknown as MediaStream;
+
+  it('keeps its video muted, since the call plays everyone from its own audio elements', async () => {
+    const wrapper = mountTile(null, 'grid', { participant: { ...participant, stream } as typeof participant });
+    await flushPromises();
+    const video = wrapper.get<HTMLVideoElement>('[data-testid="participant-video"]').element;
+    expect(video.muted).toBe(true);
+    expect(video.srcObject).not.toBeNull();
+  });
+
+  it('lets go of the video while it is off screen and shows the avatar', async () => {
+    const wrapper = mountTile(null, 'grid', { participant: { ...participant, stream } as typeof participant });
+    await flushPromises();
+    await wrapper.setProps({ offscreen: true });
+    await flushPromises();
+    expect(wrapper.get<HTMLVideoElement>('[data-testid="participant-video"]').element.srcObject).toBeNull();
+    expect(wrapper.find('[data-participant-avatar]').exists()).toBe(true);
+  });
+});
diff --git a/src/components/meeting-page/__tests__/VideoGrid.test.ts b/src/components/meeting-page/__tests__/VideoGrid.test.ts
index e2daf20..e2f4c80 100644
--- a/src/components/meeting-page/__tests__/VideoGrid.test.ts
+++ b/src/components/meeting-page/__tests__/VideoGrid.test.ts
@@ -123,7 +123,7 @@ describe('VideoGrid layout', () => {
     phone();
     const wrapper = mountGrid({ participants: people(6), viewMode: 'grid' });
     const tiles = wrapper.findAllComponents({ name: 'ParticipantTile' });
-    expect(tiles.map((tile) => tile.props('audioOnly'))).toEqual([false, false, false, false, true, true]);
+    expect(tiles.map((tile) => tile.props('offscreen'))).toEqual([false, false, false, false, true, true]);
   });
 
   it('pages the grid on desktop too, with arrows to move between pages', async () => {
@@ -133,7 +133,7 @@ describe('VideoGrid layout', () => {
     expect(wrapper.find('[data-grid-page-previous]').exists()).toBe(false);
     await wrapper.get('[data-grid-page-next]').trigger('click');
     const tiles = wrapper.findAllComponents({ name: 'ParticipantTile' });
-    expect(tiles.map((tile) => tile.props('audioOnly'))).toEqual([true, true, true, true, false, false]);
+    expect(tiles.map((tile) => tile.props('offscreen'))).toEqual([true, true, true, true, false, false]);
     expect(wrapper.find('[data-grid-page-next]').exists()).toBe(false);
     expect(wrapper.emitted('togglePin')).toBeUndefined();
   });
@@ -238,6 +238,65 @@ describe('VideoGrid tile interactions', () => {
     expect(wrapper.emitted('togglePin')).toEqual([['ada']]);
   });
 
+  it('on a phone in portrait, puts a tapped small tile on the big tile and shows the grid for a tapped big tile', () => {
+    phone();
+    vi.useFakeTimers();
+    const wrapper = mountGrid();
+    vi.advanceTimersByTime(10);
+    const tap = (id: string) => {
+      wrapper
+        .get(`[data-participant-id="${id}"] [data-participant-surface]`)
+        .element.dispatchEvent(new MouseEvent('click', { bubbles: true, detail: 1 }));
+      vi.advanceTimersByTime(300);
+    };
+
+    // The corner picture is your own view; the big tile is Ada.
+    tap('me');
+    expect(wrapper.emitted('togglePin')).toEqual([['me']]);
+    tap('ada');
+    expect(wrapper.emitted('showGrid')).toHaveLength(1);
+  });
+
+  it('keeps everyone audible when the strip is hidden, with one audio element per other person', async () => {
+    desktop();
+    const stream = {
+      getTracks: () => [],
+      getAudioTracks: () => [],
+      getVideoTracks: () => [],
+    } as unknown as MediaStream;
+    const participants = people(4).map((participant) => ({ ...participant, stream }));
+    const wrapper = mountGrid({ participants, viewMode: 'speaker' });
+    const audioIds = () =>
+      wrapper.findAll('[data-call-audio] audio').map((audio) => audio.attributes('data-participant-id'));
+    expect(audioIds()).toEqual(['ada', 'bob', 'cy']);
+
+    await wrapper.get('[data-strip-toggle]').trigger('click');
+    expect(wrapper.find('[data-testid="participant-strip"]').exists()).toBe(false);
+    expect(audioIds()).toEqual(['ada', 'bob', 'cy']);
+    // The tiles' own videos never play sound.
+    expect(wrapper.findAll('video').every((video) => (video.element as HTMLVideoElement).muted)).toBe(true);
+  });
+
+  it('rounds a lone full screen tile on a phone like the screen around it', async () => {
+    phone();
+    const wrapper = mountGrid({ participants: [me], fullscreen: true });
+    const surface = () => wrapper.get('[data-participant-surface]').attributes('style') ?? '';
+    expect(surface()).toContain('var(--device-corner-radius');
+
+    await wrapper.setProps({ fullscreen: false });
+    expect(surface()).not.toContain('--device-corner-radius');
+  });
+
+  it('keeps the corner picture clear of the full screen controls while they show', async () => {
+    phone();
+    const wrapper = mountGrid({ fullscreen: true, controlsShown: false });
+    const selfView = () => wrapper.get('[data-testid="self-view"]').attributes('style');
+    expect(selfView()).toContain('env(safe-area-inset-bottom)');
+
+    await wrapper.setProps({ controlsShown: true });
+    expect(selfView()).toContain('var(--call-bottom-chrome)');
+  });
+
   it('pins or unpins at once from the keyboard', async () => {
     desktop();
     const wrapper = mountGrid({ participants: people(3), pinnedParticipantId: 'ada', viewMode: 'speaker' });
diff --git a/src/components/ui/expand/Expand.vue b/src/components/ui/expand/Expand.vue
new file mode 100644
index 0000000..fc5be3b
--- /dev/null
+++ b/src/components/ui/expand/Expand.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+// Content that opens in place under its row, such as a setting's choices: it slides down to its height and back up.
+// It mounts as it starts to open and unmounts once it has closed, so closed content runs nothing, such as a level
+// meter. Without an animation (reduced motion) it closes at once.
+const props = defineProps<{ open: boolean }>();
+
+const root = ref<HTMLElement | null>(null);
+const mounted = ref(props.open);
+
+function finishClosing() {
+  if (!props.open) mounted.value = false;
+}
+
+watch(
+  () => props.open,
+  (open) => {
+    if (open) {
+      mounted.value = true;
+      return;
+    }
+    const element = root.value;
+    const duration = element ? parseFloat(getComputedStyle(element).transitionDuration) || 0 : 0;
+    if (!duration) finishClosing();
+  },
+);
+</script>
+
+<template>
+  <div
+    ref="root"
+    class="grid transition-[grid-template-rows] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none"
+    :class="open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'"
+    :data-state="open ? 'open' : 'closed'"
+    data-expand
+    @transitionend.self="finishClosing"
+  >
+    <div class="min-h-0 overflow-hidden" :inert="!open || undefined">
+      <slot v-if="mounted" />
+    </div>
+  </div>
+</template>
diff --git a/src/components/ui/expand/index.ts b/src/components/ui/expand/index.ts
new file mode 100644
index 0000000..0888d31
--- /dev/null
+++ b/src/components/ui/expand/index.ts
@@ -0,0 +1 @@
+export { default as Expand } from './Expand.vue';
diff --git a/src/lib/__tests__/meeting-layout.test.ts b/src/lib/__tests__/meeting-layout.test.ts
index 12bab2a..2486fbb 100644
--- a/src/lib/__tests__/meeting-layout.test.ts
+++ b/src/lib/__tests__/meeting-layout.test.ts
@@ -43,8 +43,13 @@ describe('selectCallLayout', () => {
     });
   });
 
-  it('keeps the small picture when the person picks Grid on a phone 1:1 call', () => {
-    expect(layoutFor([me, person('ada')], 'phone-portrait', { viewMode: 'grid' }).kind).toBe('self-view');
+  it('shows a phone 1:1 call as a grid page when the person picks Grid', () => {
+    expect(layoutFor([me, person('ada')], 'phone-portrait', { viewMode: 'grid' })).toEqual({
+      kind: 'grid',
+      ids: ['me', 'ada'],
+      columns: 1,
+      paged: true,
+    });
   });
 
   it('fills a phone with one column for yourself alone', () => {
diff --git a/src/lib/meeting-layout.ts b/src/lib/meeting-layout.ts
index 43fec44..bf12ed8 100644
--- a/src/lib/meeting-layout.ts
+++ b/src/lib/meeting-layout.ts
@@ -84,7 +84,7 @@ export type CallLayout =
  * The call screen's layout, from the number of tiles, the form factor, the pin and screen share:
  * a pin, or someone else's screen share, takes the stage (a share unless the person picked Grid). Otherwise a
  * phone in portrait shows a 1:1 call with a small self view, 2-4 tiles in a filled grid, and 5 or more in the
- * speaker layout (or, when the person picks Grid, grid pages of 4); phone landscape and desktop show grid pages
+ * speaker layout (when the person picks Grid, every size shows grid pages of 4, a 1:1 call included); phone landscape and desktop show grid pages
  * of 4 too. On a phone in portrait a speaker layout with only one other tile puts that tile in a corner.
  */
 export function selectCallLayout(input: CallLayoutInput): CallLayout {
@@ -119,7 +119,7 @@ export function selectCallLayout(input: CallLayoutInput): CallLayout {
   if (formFactor === 'phone-portrait') {
     const self = participants.find((participant) => participant.isLocal && !participant.screenShareOf);
     const other = participants.find((participant) => participant !== self);
-    if (ids.length === 2 && self && other && !other.isLocal && !other.screenShareOf) {
+    if (ids.length === 2 && viewMode === null && self && other && !other.isLocal && !other.screenShareOf) {
       return { kind: 'self-view', mainId: other.id, selfId: self.id };
     }
     if (ids.length >= PHONE_SPEAKER_FROM && viewMode === null) return speaker(defaultMainId());
diff --git a/src/pages/MeetingPage.vue b/src/pages/MeetingPage.vue
index 537f6de..f5e136e 100644
--- a/src/pages/MeetingPage.vue
+++ b/src/pages/MeetingPage.vue
@@ -20,6 +20,7 @@ import MeetingInviteDialog from '@/components/meeting-page/MeetingInviteDialog.v
 import MeetingPermissionSheet from '@/components/meeting-page/MeetingPermissionSheet.vue';
 import ScreenAreaPicker from '@/components/meeting-page/ScreenAreaPicker.vue';
 import VideoGrid from '@/components/meeting-page/VideoGrid.vue';
+import { Expand } from '@/components/ui/expand';
 import { menuIconMotionKey } from '@/components/ui/liquid-menu/motion';
 import { LoadingRipple } from '@/components/ui/loading';
 import { toast } from '@/components/ui/toast';
@@ -42,6 +43,7 @@ import { followAudioOutput } from '@/services/audio-output';
 import { playHaptic } from '@/services/haptics';
 import { showSystemNotification } from '@/services/notifications';
 import { type MeetingRoomAccess, SocialApiError, type UserStatus, socialApi } from '@/services/social-api';
+import { coverScreenTop } from '@/services/system-bars';
 import type { MediaIssue } from '@/services/webrtc-sfu';
 import { getServices } from '@/xstate/machines/webrtc/actors';
 import type { Participant } from '@/xstate/machines/webrtc/types';
@@ -174,7 +176,10 @@ const { height: addPeopleRowHeight } = useElementSize(addPeopleRow, undefined, {
 const phoneControlsHeight = computed(() => {
   const measured = phoneControls.value?.restingHeight ?? 0;
   const tray = measured > 0 ? `${measured}px` : 'calc(var(--meeting-control-size) + 2.25rem)';
-  return `calc(max(0.5rem, env(safe-area-inset-bottom)) + ${tray})`;
+  // Full screen lifts the bar by 0.25rem (see CallPhoneControls).
+  const lift = isFullscreen.value ? ' + 0.25rem' : '';
+  // The bar's gap to the screen bottom, as CallPhoneControls pads it: 0.5rem, and 0.5rem above the home indicator.
+  return `calc(max(0.5rem, calc(env(safe-area-inset-bottom) + 0.5rem)) + ${tray}${lift})`;
 });
 const callAreaStyle = computed(() =>
   usesPhoneChrome.value
@@ -192,8 +197,11 @@ const callAreaStyle = computed(() =>
       }
     : {
         '--call-area-top': 'calc(2.25rem + var(--meeting-control-size))',
-        // The controls bar's top edge: 1.5rem from the bottom, plus the tray (the buttons, its padding and border).
-        '--call-controls-height': 'calc(var(--meeting-control-size) + 2rem + 2px)',
+        // The controls bar's top edge: 1.5rem from the bottom (1.75rem in full screen, see MeetingControls), plus
+        // the tray (the buttons, its padding and border).
+        '--call-controls-height': isFullscreen.value
+          ? 'calc(var(--meeting-control-size) + 2.25rem + 2px)'
+          : 'calc(var(--meeting-control-size) + 2rem + 2px)',
         '--call-bottom-chrome': 'var(--call-controls-height)',
         '--call-area-bottom': 'calc(var(--meeting-control-size) + 3.5rem)',
       },
@@ -623,6 +631,7 @@ onUnmounted(() => {
   window.removeEventListener('pagehide', handlePageHide);
   window.removeEventListener('keydown', handleFullscreenKeydown);
   if (isFullscreen.value) setFullscreen(false);
+  coverScreenTop('call', false);
   document.documentElement.classList.remove('meeting-immersive');
   window.dispatchEvent(new CustomEvent<boolean>('openmeet:meeting-fullscreen', { detail: false }));
   window.dispatchEvent(new CustomEvent<boolean>('openmeet:meeting-call-chrome', { detail: false }));
@@ -796,6 +805,11 @@ watch(isFullscreen, (fullscreen) => {
   else callControls.show();
 });
 
+// In the OpenMeet app, a full screen call on a phone in portrait covers the whole screen, around the notch too
+// (the home indicator area is always covered); the rest of the call stays below the status bar.
+const coversSystemBars = computed(() => isFullscreen.value && callFormFactor.value === 'phone-portrait');
+watch(coversSystemBars, (covers) => coverScreenTop('call', covers));
+
 function handleVideoSwipe(direction: 'up' | 'down') {
   if (!usesPhoneChrome.value || !isFullscreen.value) return;
   if (direction === 'up' && !showsControls.value) {
@@ -814,7 +828,6 @@ function toggleOwnCamera() {
   saveCallSettings({ showOwnCamera: showOwnCamera.value });
 }
 
-
 // The top bar's camera flip moves to the next camera, such as from the front to the back camera of a phone.
 const cameraSettings = useMeetingMediaSettings('video');
 async function flipCamera() {
@@ -1089,12 +1102,14 @@ const handleReconnect = () => {
                 {{ t('meeting.warning') }}
               </span>
             </div>
-            <p v-if="showConnectionQualityDetails" class="mt-1 text-xs text-harbor-danger-strong">
-              {{ connectionQualityReason || t('meeting.mediaWarning') }}
-              <span v-if="packetLossPercent > 0">
-                {{ t('meeting.packetLoss', { percent: packetLossPercent }) }}
-              </span>
-            </p>
+            <Expand :open="showConnectionQualityDetails">
+              <p class="mt-1 text-xs text-harbor-danger-strong">
+                {{ connectionQualityReason || t('meeting.mediaWarning') }}
+                <span v-if="packetLossPercent > 0">
+                  {{ t('meeting.packetLoss', { percent: packetLossPercent }) }}
+                </span>
+              </p>
+            </Expand>
           </div>
           <ChevronDown
             class="h-4 w-4 shrink-0 text-harbor-danger-strong transition-transform"
@@ -1169,6 +1184,7 @@ const handleReconnect = () => {
           :controls-hidden="!showsControls"
           :hide-own-camera="!showOwnCamera"
           @toggle-pin="handleTogglePin"
+          @show-grid="handleSetViewMode('grid')"
           @toggle-fullscreen="handleToggleFullscreen"
           @long-press="handleVideoLongPress"
           @swipe="handleVideoSwipe"
@@ -1196,6 +1212,7 @@ const handleReconnect = () => {
             :show-own-camera="showOwnCamera"
             :audio-warning="audioWarning"
             :video-warning="videoWarning"
+            :fullscreen="isFullscreen"
             @toggle-mute="handleToggleMute"
             @toggle-video="handleToggleVideo"
             @request-access="handleRequestAccess"

From b74e0c903d57f80b058fd304d7b4c2239c18ccb0 Mon Sep 17 00:00:00 2001
From: pythonPlant12 <pythonplant12@gmail.com>
Date: Sun, 15 Nov 2026 00:39:19 +0100
Subject: [PATCH 2/2] feat(workspace): screen edges in the app, chat insets,
 calls without unread, swipeable dark-aware toasts

- Ask the app to cover the status bar for an open chat on a phone; pad the chat header and composer for the insets, and keep the tab bar close to the bottom edge.
- Remove the unread dot, read and unread swipes, and missed-call count from the calls list.
- Decline an incoming call from a white button with a red icon, and ring only in the app bar while the app is visible.
- Show notifications in the call's dark palette during a call, let them take swipes over open dialogs, and dismiss them with a swipe up too.
- Open submenus 8px from their menu, and give the info page avatar more room below the header.
---
 src/assets/index.css                          | 23 +++++--
 .../dashboard-page/__tests__/ChatPane.test.ts | 12 ++++
 .../dashboard-page/calls/CallsSidebar.vue     | 63 ++-----------------
 .../calls/__tests__/CallsSidebar.test.ts      | 41 ++++--------
 .../dashboard-page/chat/ChatPane.vue          | 20 +++++-
 .../dashboard-page/chat/ChatThread.vue        | 12 +++-
 .../dashboard-page/details/InfoPage.vue       |  2 +-
 src/components/layout/IncomingCallBar.vue     |  3 +-
 src/components/layout/TheNavbar.vue           |  4 +-
 .../layout/__tests__/IncomingCallBar.test.ts  |  3 +
 src/components/ui/dialog/DialogContent.vue    |  2 +
 .../dropdown-menu/DropdownMenuSubContent.vue  |  2 +
 src/components/ui/sheet/SheetContent.vue      |  7 ++-
 src/components/ui/toast/Toaster.vue           |  2 +-
 .../ui/toast/__tests__/store.test.ts          | 20 +++++-
 src/components/ui/toast/index.ts              |  2 +-
 src/components/ui/toast/store.ts              | 10 +++
 src/lib/swallow-next-click.ts                 |  5 +-
 src/pages/AccountPage.vue                     |  4 +-
 src/pages/DashboardPage.vue                   | 45 +------------
 src/services/__tests__/system-alerts.test.ts  | 30 +++++++++
 src/services/__tests__/system-bars.test.ts    | 21 ++++++-
 src/services/system-alerts.ts                 | 35 ++++++++++-
 src/services/system-bars.ts                   | 44 +++++++++++++
 24 files changed, 257 insertions(+), 155 deletions(-)

diff --git a/src/assets/index.css b/src/assets/index.css
index 56876f2..689042e 100644
--- a/src/assets/index.css
+++ b/src/assets/index.css
@@ -255,6 +255,12 @@
   gap: 0.75rem;
 }
 
+/* A notification takes touches even while a dialog is open: the dialog turns off pointer events on the page, and
+   the notifications would inherit that, so they could not be swiped away. */
+.harbor-toaster [data-sonner-toast]:not([data-visible='false']) {
+  pointer-events: auto;
+}
+
 .harbor-toaster [data-sonner-toast] [data-title] {
   color: rgb(var(--harbor-ink));
   font-size: 0.9375rem;
@@ -393,6 +399,9 @@
   /* Whole bars: the tabs plus the bar's padding on both sides. */
   --liquid-bar-height: calc(var(--ui-tab-size) + 12px);
   --liquid-bar-height-sm: calc(var(--ui-tab-size-sm) + 8px);
+  /* The phone tab bar's gap to the screen bottom: 1rem, or a little inside the home indicator area where the page
+     covers it (the OpenMeet app), so the bar sits close to the edge. */
+  --liquid-bar-bottom: max(1rem, calc(env(safe-area-inset-bottom) - 0.5rem));
   /* Meeting controls and the meeting's top row buttons, in normal and full screen. */
   /* Large screens stop growing them at 52px, so the bar stays compact on big monitors. */
   --meeting-control-size: clamp(44px, calc(30px + 2.6vmin), 52px);
@@ -1720,9 +1729,9 @@
     }
   }
 
-  /* The call screen is always dark, so it and its chrome (controls, phone bars, chat, camera preview) use a dark
-     Harbor palette. `meeting-immersive` sits on the document while a call is on screen, because the chat and the
-     camera preview open in portals. */
+  /* The call screen is always dark, so it and its chrome (controls, phone bars, chat, camera preview, and the
+     notifications shown during the call) use a dark Harbor palette. `meeting-immersive` sits on the document while
+     a call is on screen, because the chat, the camera preview, and the notifications render outside it. */
   .meeting-controls-dark,
   .call-screen-dark,
   .meeting-immersive
@@ -1731,7 +1740,8 @@
       [data-call-phone-top-bar],
       .harbor-chat-panel,
       [data-camera-preview],
-      [data-meeting-invite]
+      [data-meeting-invite],
+      .harbor-toaster
     ) {
     --harbor-ink: 233 237 239;
     --harbor-ink-soft: 209 215 219;
@@ -1792,6 +1802,11 @@
     border-top: 1px solid rgb(var(--harbor-line));
   }
 
+  /* A closed expander has no height, so it draws no divider either. */
+  .call-panel-group > [data-expand][data-state='closed'] {
+    border-top-width: 0;
+  }
+
   .call-panel-row {
     display: flex;
     width: 100%;
diff --git a/src/components/dashboard-page/__tests__/ChatPane.test.ts b/src/components/dashboard-page/__tests__/ChatPane.test.ts
index 61f7872..c3e40a4 100644
--- a/src/components/dashboard-page/__tests__/ChatPane.test.ts
+++ b/src/components/dashboard-page/__tests__/ChatPane.test.ts
@@ -121,6 +121,18 @@ describe('ChatPane', () => {
     expect(wrapper.find('[data-presence-dot]').exists()).toBe(false);
   });
 
+  it('pads the header for the status bar and the composer for the home indicator, except while typing', async () => {
+    const wrapper = mountPane({ conversation });
+    expect(wrapper.get('header').classes().join(' ')).toContain('env(safe-area-inset-top)');
+    const bar = wrapper.get('[data-composer-bar]');
+    expect(bar.classes().join(' ')).toContain('env(safe-area-inset-bottom)');
+
+    await bar.trigger('focusin');
+    expect(bar.classes()).toContain('pb-2.5');
+    await bar.trigger('focusout');
+    expect(bar.classes().join(' ')).toContain('env(safe-area-inset-bottom)');
+  });
+
   it('starts video and audio calls from the header actions', async () => {
     const wrapper = mountPane({
       conversation,
diff --git a/src/components/dashboard-page/calls/CallsSidebar.vue b/src/components/dashboard-page/calls/CallsSidebar.vue
index 5b9d871..44e3f00 100644
--- a/src/components/dashboard-page/calls/CallsSidebar.vue
+++ b/src/components/dashboard-page/calls/CallsSidebar.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { CheckCheck, EyeOff, Info, Phone, PhoneMissed, Plus, UserRound, UsersRound, Video } from 'lucide-vue-next';
+import { Info, Phone, PhoneMissed, Plus, UserRound, UsersRound, Video } from 'lucide-vue-next';
 import { type Component, computed, ref } from 'vue';
 
 import PaneHeader from '@/components/dashboard-page/PaneHeader.vue';
-import SectionBadge from '@/components/dashboard-page/SectionBadge.vue';
 import { Avatar, AvatarMosaic, type MosaicFace } from '@/components/ui/avatar';
 import { ListHeading, ListRow } from '@/components/ui/list-row';
 import { LoadingRipple } from '@/components/ui/loading';
@@ -23,8 +22,6 @@ import type { MeetingPerson, MeetingSession } from '@/services/social-api';
 
 const props = defineProps<{
   panel: CallsPanel;
-  /** Missed calls not read yet. */
-  badge: number;
   meetings: MeetingSession[];
   isLoading: boolean;
   error: string;
@@ -41,7 +38,6 @@ const props = defineProps<{
 const emit = defineEmits<{
   (event: 'open', meeting: MeetingSession): void;
   (event: 'call', meeting: MeetingSession): void;
-  (event: 'toggle-read', meeting: MeetingSession): void;
   (event: 'load-more'): void;
   (event: 'start-meeting'): void;
 }>();
@@ -112,7 +108,6 @@ function initials(name: string) {
     aria-labelledby="calls-heading"
   >
     <PaneHeader v-model:query="query" title="Calls" heading-id="calls-heading" search-label="Search calls">
-      <template #badge><SectionBadge :count="badge" singular="missed call" plural="missed calls" /></template>
       <template #trailing>
         <RoundButton tone="accent" aria-label="Start a meeting" title="Start a meeting" @click="emit('start-meeting')">
           <!-- A new call: the handset with a plus in its empty top-right corner. -->
@@ -154,59 +149,16 @@ function initials(name: string) {
       </p>
       <section v-else>
         <ListHeading class="pt-1">Recent</ListHeading>
+        <!-- A missed call reads in red; a swipe left shows the call's details. -->
         <SwipeableRow
           v-for="meeting in visibleMeetings"
           :id="`call-${meeting.id}`"
           :key="meeting.id"
-          :leading-width="meeting.missed ? SWIPE_ACTION_WIDTH : 0"
+          :leading-width="0"
           :trailing-width="SWIPE_ACTION_WIDTH"
-          :full-swipe-leading="meeting.missed"
-          :full-swipe-trailing="meeting.unread"
-          @full-swipe-leading="emit('toggle-read', meeting)"
-          @full-swipe-trailing="emit('toggle-read', meeting)"
         >
-          <template #leading="{ armed, close }">
+          <template #trailing="{ close }">
             <button
-              v-if="meeting.missed"
-              type="button"
-              data-swipe-action
-              class="flex h-full w-full items-center justify-start text-white transition-colors"
-              :class="armed ? 'bg-harbor-ink-soft' : 'bg-harbor-icon'"
-              :aria-label="meeting.unread ? 'Mark call read' : 'Mark call unread'"
-              @click="
-                close();
-                emit('toggle-read', meeting);
-              "
-            >
-              <span
-                class="flex w-[4.75rem] shrink-0 flex-col items-center justify-center gap-1 text-[11px] font-semibold"
-                ><CheckCheck v-if="meeting.unread" class="size-4" /><EyeOff v-else class="size-4" />
-                {{ meeting.unread ? 'Read' : 'Unread' }}</span
-              >
-            </button>
-          </template>
-          <!-- Swiping an unread missed call left marks it read; read calls offer their details. -->
-          <template #trailing="{ armed, close }">
-            <button
-              v-if="meeting.unread"
-              type="button"
-              data-swipe-action
-              data-call-read-action
-              class="flex h-full w-full items-center justify-end text-white transition-colors"
-              :class="armed ? 'bg-harbor-ink-soft' : 'bg-harbor-icon'"
-              aria-label="Mark call read"
-              @click="
-                close();
-                emit('toggle-read', meeting);
-              "
-            >
-              <span
-                class="flex w-[4.75rem] shrink-0 flex-col items-center justify-center gap-1 text-[11px] font-semibold"
-                ><CheckCheck class="size-4" />Read</span
-              >
-            </button>
-            <button
-              v-else
               type="button"
               data-swipe-action
               class="flex h-full w-full items-center justify-end bg-harbor-hover text-harbor-ink"
@@ -258,13 +210,6 @@ function initials(name: string) {
             </template>
             <template #trailing>
               <LoadingRipple v-if="callingId === meeting.id" class="size-4 text-harbor-icon" />
-              <span
-                v-else-if="meeting.unread"
-                data-call-unread
-                class="size-2.5 shrink-0 rounded-full bg-harbor-accent"
-                role="img"
-                aria-label="Unread"
-              />
             </template>
             <!-- Desktop only: call back and details on hover; touch opens the details, which can call back. -->
             <template #actions>
diff --git a/src/components/dashboard-page/calls/__tests__/CallsSidebar.test.ts b/src/components/dashboard-page/calls/__tests__/CallsSidebar.test.ts
index 56f5303..e424164 100644
--- a/src/components/dashboard-page/calls/__tests__/CallsSidebar.test.ts
+++ b/src/components/dashboard-page/calls/__tests__/CallsSidebar.test.ts
@@ -42,7 +42,6 @@ function mountSidebar(props: Partial<InstanceType<typeof CallsSidebar>['$props']
     },
     props: {
       panel: 'collapsed',
-      badge: 0,
       meetings,
       isLoading: false,
       error: '',
@@ -68,13 +67,9 @@ describe('CallsSidebar', () => {
     expect(wrapper.emitted('toggle')).toBeUndefined();
   });
 
-  it('shows missed calls beside the title while collapsed', () => {
-    expect(mountSidebar().find('[data-section-badge]').exists()).toBe(false);
-
-    const badge = mountSidebar({ badge: 3 }).get('#calls-heading [data-section-badge]');
-    expect(badge.text()).toBe('3');
-    expect(badge.attributes('aria-label')).toBe('3 missed calls');
-    expect(mountSidebar({ badge: 150 }).get('[data-section-badge]').text()).toBe('99+');
+  it('shows no missed-call count beside the title', () => {
+    const wrapper = mountSidebar({ meetings: [missedCall] });
+    expect(wrapper.find('[data-section-badge]').exists()).toBe(false);
   });
 
   it('lists calls when expanded and opens one on press', async () => {
@@ -87,35 +82,23 @@ describe('CallsSidebar', () => {
     expect(wrapper.emitted('open')?.[0]).toEqual([meetings[0]]);
   });
 
-  it('marks unread missed calls with a dot and a missed label', () => {
+  it('marks a missed call in red with a missed label, and no unread dot', () => {
     const wrapper = mountSidebar({ panel: 'top', meetings: [missedCall, meetings[0]!] });
     const [missed, answered] = wrapper.findAll('[data-call-item]');
 
-    expect(missed!.find('[data-call-unread]').exists()).toBe(true);
     expect(missed!.get('[data-call-missed]').text()).toContain('Missed');
-    expect(answered!.find('[data-call-unread]').exists()).toBe(false);
-    expect(answered!.find('[data-call-missed]').exists()).toBe(false);
-  });
-
-  it('drops the dot once a missed call is read', () => {
-    const wrapper = mountSidebar({ panel: 'top', meetings: [{ ...missedCall, unread: false }] });
+    expect(missed!.find('.text-harbor-danger').exists()).toBe(true);
     expect(wrapper.find('[data-call-unread]').exists()).toBe(false);
-    expect(wrapper.find('[data-call-missed]').exists()).toBe(true);
+    expect(answered!.find('[data-call-missed]').exists()).toBe(false);
   });
 
-  it('toggles a missed call read state without exposing call again', async () => {
-    const wrapper = mountSidebar({ panel: 'top', meetings: [missedCall, meetings[0]!] });
-
-    await wrapper.get('[data-call-read-action]').trigger('click');
-    expect(wrapper.emitted('toggle-read')?.[0]).toEqual([missedCall]);
-    expect(wrapper.findAll('[data-call-read-action]')).toHaveLength(1);
-    expect(wrapper.find('[aria-label="Call details"]').exists()).toBe(true);
-  });
+  it('offers only call details on a swipe, with no read or unread action', async () => {
+    const wrapper = mountSidebar({ panel: 'top', meetings: [missedCall] });
+    expect(wrapper.find('[data-call-read-action]').exists()).toBe(false);
+    expect(wrapper.find('[aria-label="Mark call unread"]').exists()).toBe(false);
 
-  it('marks a read missed call unread from the right swipe action', async () => {
-    const wrapper = mountSidebar({ panel: 'top', meetings: [{ ...missedCall, unread: false }] });
-    await wrapper.get('[aria-label="Mark call unread"]').trigger('click');
-    expect(wrapper.emitted('toggle-read')?.[0]).toEqual([{ ...missedCall, unread: false }]);
+    await wrapper.get('[aria-label="Call details"]').trigger('click');
+    expect(wrapper.emitted('open')?.[0]).toEqual([missedCall]);
   });
 
   it('searches from the round button beside the title', () => {
diff --git a/src/components/dashboard-page/chat/ChatPane.vue b/src/components/dashboard-page/chat/ChatPane.vue
index 0c09629..289d043 100644
--- a/src/components/dashboard-page/chat/ChatPane.vue
+++ b/src/components/dashboard-page/chat/ChatPane.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { useElementSize } from '@vueuse/core';
+import { useElementSize, useMediaQuery } from '@vueuse/core';
 import { ArrowLeft, CircleUserRound, Ellipsis, MessageCircleMore, Phone, UsersRound, Video, X } from 'lucide-vue-next';
 import { AnimatePresence, motion } from 'motion-v';
-import { computed, ref, watch } from 'vue';
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
 
 import ChatThread from '@/components/dashboard-page/chat/ChatThread.vue';
 import type { SenderAvatar } from '@/components/dashboard-page/chat/voice-message';
@@ -17,6 +17,7 @@ import { LoadingRipple } from '@/components/ui/loading';
 import { PresenceDot } from '@/components/ui/presence-dot';
 import { userStatusOption } from '@/config/user-status.config';
 import type { Conversation, ConversationMessage, Friend, GifSearchResult, GroupMember } from '@/services/social-api';
+import { coverScreenTop } from '@/services/system-bars';
 
 const props = defineProps<{
   conversation: Conversation | null;
@@ -74,6 +75,16 @@ const content = defineModel<string>('content', { required: true });
 const replyTo = defineModel<ConversationMessage | null>('replyTo', { default: null });
 const attachments = defineModel<File[]>('attachments', { default: () => [] });
 const thread = ref<InstanceType<typeof ChatThread> | null>(null);
+// On a phone an open chat fills the screen, so in the OpenMeet app it reaches under the status bar too; the header
+// pads for it with env(safe-area-inset-top), and its fade colours the area.
+const isPhoneLayout = useMediaQuery('(max-width: 639px)');
+watch(
+  () => !!(props.conversation || props.pendingFriend) && isPhoneLayout.value,
+  (open) => coverScreenTop('chat', open),
+  { immediate: true },
+);
+onBeforeUnmount(() => coverScreenTop('chat', false));
+
 const header = ref<HTMLElement | null>(null);
 const { height: headerHeight } = useElementSize(header, undefined, { box: 'border-box' });
 // The header's lower part is only its fade, so the first message starts inside it and slides under the blur.
@@ -183,7 +194,10 @@ defineExpose({
         class="relative flex h-full min-h-0 flex-col"
       >
         <!-- The header floats over the messages, which fade and blur as they scroll under it. -->
-        <header ref="header" class="pointer-events-none absolute inset-x-0 top-0 z-20 px-3 pb-12 pt-3 sm:px-5">
+        <header
+          ref="header"
+          class="pointer-events-none absolute inset-x-0 top-0 z-20 px-3 pb-12 pt-[calc(0.75rem+env(safe-area-inset-top))] sm:px-5"
+        >
           <!-- The header lets touches through, so it marks its fade for the status bar colour to find. -->
           <span class="harbor-chat-header-fade absolute inset-0 -z-10" aria-hidden="true" data-system-bar-layer />
           <div class="flex items-center gap-2 sm:gap-3">
diff --git a/src/components/dashboard-page/chat/ChatThread.vue b/src/components/dashboard-page/chat/ChatThread.vue
index 67a86ae..7ca47ef 100644
--- a/src/components/dashboard-page/chat/ChatThread.vue
+++ b/src/components/dashboard-page/chat/ChatThread.vue
@@ -134,6 +134,8 @@ const mediaInput = ref<HTMLInputElement | null>(null);
 const previewUrls = new Map<File, string>();
 let pendingBottomScroll: ScrollBehavior | null = null;
 const composerCaret = ref(0);
+// Typing on a phone brings up the keyboard over the home indicator area (see the composer's padding).
+const isComposerFocused = ref(false);
 const commandSelection = ref(0);
 const mentionSelection = ref(0);
 const gifSelection = ref(0);
@@ -803,7 +805,15 @@ defineExpose({ scrollToBottom, getScrollState, isNearBottom, restoreScroll, focu
       :attachment-urls="attachmentUrls"
       @close="previewAttachments = []"
     />
-    <div class="bg-harbor-canvas px-2 pb-2.5 pt-2 sm:px-4">
+    <!-- The composer sits on the home indicator area, so it pads for it with a little room to spare, except while
+         typing: the keyboard covers that area then, and the padding would only leave a gap above it. -->
+    <div
+      class="bg-harbor-canvas px-2 pt-2 sm:px-4"
+      :class="isComposerFocused ? 'pb-2.5' : 'pb-[max(0.625rem,calc(env(safe-area-inset-bottom)+0.375rem))]'"
+      data-composer-bar
+      @focusin="isComposerFocused = true"
+      @focusout="isComposerFocused = false"
+    >
       <p v-if="footerNote" class="mb-2 text-xs text-harbor-muted">{{ footerNote }}</p>
       <AnimatePresence>
         <motion.div
diff --git a/src/components/dashboard-page/details/InfoPage.vue b/src/components/dashboard-page/details/InfoPage.vue
index de3b07d..d7a526a 100644
--- a/src/components/dashboard-page/details/InfoPage.vue
+++ b/src/components/dashboard-page/details/InfoPage.vue
@@ -49,7 +49,7 @@ const emit = defineEmits<{ (event: 'update:open', value: boolean): void }>();
       </header>
       <DialogDescription class="sr-only">{{ description }}</DialogDescription>
       <div
-        class="min-h-0 flex-1 overflow-y-auto overscroll-contain pt-[calc(4.5rem+env(safe-area-inset-top))]"
+        class="min-h-0 flex-1 overflow-y-auto overscroll-contain pt-[calc(5.5rem+env(safe-area-inset-top))]"
         :aria-busy="busy"
       >
         <div class="mx-auto max-w-3xl px-4 pb-[calc(2rem+env(safe-area-inset-bottom))] sm:px-6">
diff --git a/src/components/layout/IncomingCallBar.vue b/src/components/layout/IncomingCallBar.vue
index 97c3f07..9736805 100644
--- a/src/components/layout/IncomingCallBar.vue
+++ b/src/components/layout/IncomingCallBar.vue
@@ -39,8 +39,9 @@ const { t } = useI18n();
       </span>
       <LoadingRipple v-if="isAnswering" class="mr-3 size-5 text-harbor-icon" />
       <template v-else>
+        <!-- Decline is the white disc with a red icon, so Answer keeps the visual weight. -->
         <RoundButton
-          tone="danger"
+          tone="destructive"
           data-incoming-decline
           :aria-label="t('dashboard.decline')"
           :title="t('dashboard.decline')"
diff --git a/src/components/layout/TheNavbar.vue b/src/components/layout/TheNavbar.vue
index 8873e5d..4fa6738 100644
--- a/src/components/layout/TheNavbar.vue
+++ b/src/components/layout/TheNavbar.vue
@@ -123,7 +123,7 @@ const mobileNavBottomClass = computed(() =>
   isMeetingPage.value
     ? 'bottom-[calc(var(--meeting-control-size)+2.5rem)]'
     : showWorkspaceTabs.value
-      ? 'bottom-[calc(max(1rem,env(safe-area-inset-bottom))+var(--liquid-bar-height)+12px)]'
+      ? 'bottom-[calc(var(--liquid-bar-bottom)+var(--liquid-bar-height)+12px)]'
       : isDashboardPage.value
         ? 'bottom-4'
         : 'bottom-6',
@@ -747,7 +747,7 @@ watch(mobileAccountActionsRef, (element, previous) => {
          above its backdrop, so the sheet sits on top of the bar instead of covering it. -->
     <div
       v-if="showWorkspaceTabs"
-      class="marketing-font pointer-events-none fixed inset-x-0 bottom-[max(1rem,env(safe-area-inset-bottom))] flex justify-center px-4"
+      class="marketing-font pointer-events-none fixed inset-x-0 bottom-[var(--liquid-bar-bottom)] flex justify-center px-4"
       :class="mobileMenuOpen ? 'z-[60]' : 'z-40'"
     >
       <LiquidTabBar
diff --git a/src/components/layout/__tests__/IncomingCallBar.test.ts b/src/components/layout/__tests__/IncomingCallBar.test.ts
index 04ab4f9..3659f50 100644
--- a/src/components/layout/__tests__/IncomingCallBar.test.ts
+++ b/src/components/layout/__tests__/IncomingCallBar.test.ts
@@ -20,6 +20,9 @@ describe('IncomingCallBar', () => {
     expect(wrapper.get('[data-incoming-call]').text()).toContain('1 more');
 
     await wrapper.get('[data-incoming-accept]').trigger('click');
+    // Decline is the white disc with a red icon, not a red fill.
+    expect(wrapper.get('[data-incoming-decline]').attributes('data-tone')).toBe('destructive');
+    expect(wrapper.get('[data-incoming-decline]').classes()).not.toContain('liquid-glass-danger');
     await wrapper.get('[data-incoming-decline]').trigger('click');
     expect(wrapper.emitted('accept')).toHaveLength(1);
     expect(wrapper.emitted('decline')).toHaveLength(1);
diff --git a/src/components/ui/dialog/DialogContent.vue b/src/components/ui/dialog/DialogContent.vue
index 47e3b9b..1b19e42 100644
--- a/src/components/ui/dialog/DialogContent.vue
+++ b/src/components/ui/dialog/DialogContent.vue
@@ -6,6 +6,7 @@ import { DialogClose, DialogContent, DialogOverlay, DialogPortal, useForwardProp
 import type { HTMLAttributes } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import { keepOpenForToasts } from '@/components/ui/toast/store';
 import { cn } from '@/lib/utils';
 
 // The portal is the root, so attributes such as data-* go onto the content element itself.
@@ -34,6 +35,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     />
     <DialogContent
       v-bind="{ ...forwarded, ...$attrs }"
+      @interact-outside="keepOpenForToasts"
       :class="
         cn(
           'harbor-dialog-content fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg sm:rounded-lg',
diff --git a/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue b/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
index d39aa62..338c3a5 100644
--- a/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -12,6 +12,8 @@ defineOptions({ inheritAttrs: false });
 
 // Like DropdownMenuContent: stay inside the viewport and scroll when taller than it.
 const props = withDefaults(defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>(), {
+  // A clear gap from the menu it opens from, so the two read as separate surfaces.
+  sideOffset: 8,
   collisionPadding: 12,
   // Shifting keeps the whole menu on screen, even when its trigger sits at an edge.
   sticky: 'always',
diff --git a/src/components/ui/sheet/SheetContent.vue b/src/components/ui/sheet/SheetContent.vue
index 285355a..d926bb2 100644
--- a/src/components/ui/sheet/SheetContent.vue
+++ b/src/components/ui/sheet/SheetContent.vue
@@ -8,6 +8,7 @@ import { DialogClose, DialogContent, DialogOverlay, DialogPortal, useForwardProp
 import type { HTMLAttributes } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import { keepOpenForToasts } from '@/components/ui/toast/store';
 import { cn } from '@/lib/utils';
 
 interface SheetContentProps extends DialogContentProps {
@@ -43,7 +44,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
         )
       "
     />
-    <DialogContent :class="cn(sheetVariants({ side }), props.class)" v-bind="{ ...forwarded, ...$attrs }">
+    <DialogContent
+      :class="cn(sheetVariants({ side }), props.class)"
+      v-bind="{ ...forwarded, ...$attrs }"
+      @interact-outside="keepOpenForToasts"
+    >
       <slot />
 
       <DialogClose
diff --git a/src/components/ui/toast/Toaster.vue b/src/components/ui/toast/Toaster.vue
index 7b16dc4..cdbda21 100644
--- a/src/components/ui/toast/Toaster.vue
+++ b/src/components/ui/toast/Toaster.vue
@@ -20,7 +20,7 @@ const position = computed(() => (isMobile.value ? 'top-center' : 'top-right'));
     :gap="10"
     :offset="{ top: 84, right: 20, left: 20 }"
     :mobile-offset="{ top: 84, right: 12, left: 12 }"
-    :swipe-directions="['left', 'right']"
+    :swipe-directions="['left', 'right', 'top']"
     container-aria-label="OpenMeet notifications"
   >
     <template #success-icon><ToastIcon kind="success" /></template>
diff --git a/src/components/ui/toast/__tests__/store.test.ts b/src/components/ui/toast/__tests__/store.test.ts
index a0839ee..9547872 100644
--- a/src/components/ui/toast/__tests__/store.test.ts
+++ b/src/components/ui/toast/__tests__/store.test.ts
@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { dismissToast, toast } from '@/components/ui/toast/store';
+import { dismissToast, keepOpenForToasts, toast } from '@/components/ui/toast/store';
 
 const sonner = vi.hoisted(() => {
   const toast = Object.assign(vi.fn(), {
@@ -58,4 +58,22 @@ describe('toast adapter', () => {
 
     expect(sonner.toast.dismiss).toHaveBeenCalledWith('toast-id');
   });
+
+  it('keeps a dialog open for a press on a notification, and only then', () => {
+    const toaster = document.createElement('section');
+    toaster.setAttribute('data-sonner-toaster', '');
+    const toastItem = document.createElement('li');
+    toaster.append(toastItem);
+    const outside = (target: Element) => {
+      const event = new CustomEvent('dismissableLayer.pointerDownOutside', {
+        cancelable: true,
+        detail: { originalEvent: { target } },
+      });
+      keepOpenForToasts(event);
+      return event.defaultPrevented;
+    };
+
+    expect(outside(toastItem)).toBe(true);
+    expect(outside(document.createElement('div'))).toBe(false);
+  });
 });
diff --git a/src/components/ui/toast/index.ts b/src/components/ui/toast/index.ts
index 2949b1f..bf19a17 100644
--- a/src/components/ui/toast/index.ts
+++ b/src/components/ui/toast/index.ts
@@ -1,3 +1,3 @@
 export { default as Toaster } from './Toaster.vue';
-export { dismissToast, toast } from './store';
+export { dismissToast, keepOpenForToasts, toast } from './store';
 export type { ToastOptions, ToastVariant } from './store';
diff --git a/src/components/ui/toast/store.ts b/src/components/ui/toast/store.ts
index 3530ef5..600c975 100644
--- a/src/components/ui/toast/store.ts
+++ b/src/components/ui/toast/store.ts
@@ -24,3 +24,13 @@ export function toast({ title, description, duration, variant, action, cancel }:
   if (variant === 'success') return sonnerToast.success(title, options);
   return sonnerToast.info(title, options);
 }
+
+/**
+ * A dialog or sheet calls this for a press or focus outside it: a press on a notification, such as a swipe to
+ * dismiss it, must not also close the dialog.
+ */
+export function keepOpenForToasts(event: Event) {
+  const original = (event as CustomEvent<{ originalEvent?: Event }>).detail?.originalEvent;
+  const target = original?.target ?? event.target;
+  if (target instanceof Element && target.closest('[data-sonner-toaster]')) event.preventDefault();
+}
diff --git a/src/lib/swallow-next-click.ts b/src/lib/swallow-next-click.ts
index 22b0101..9788941 100644
--- a/src/lib/swallow-next-click.ts
+++ b/src/lib/swallow-next-click.ts
@@ -23,9 +23,10 @@ export function swallowNextClick(timeoutMs = 600) {
 
 // Open overlays that a press outside should only dismiss: menus, and panels marked with `data-dismiss-guard`.
 const OPEN_OVERLAYS = '[role="menu"], [data-dismiss-guard][data-state="open"]';
-// Presses here belong to an overlay, or toggle one, so their click must go through.
+// Presses here belong to an overlay, or toggle one, so their click must go through. Notifications float above
+// everything, so a press on one (a swipe to dismiss it) leaves open overlays alone.
 const OVERLAY_PARTS =
-  '[role="menu"], [role="dialog"], [data-dismiss-guard], [aria-haspopup][data-state="open"], [data-chat-trigger]';
+  '[role="menu"], [role="dialog"], [data-dismiss-guard], [aria-haspopup][data-state="open"], [data-chat-trigger], [data-sonner-toaster]';
 
 /**
  * Makes every press outside an open menu or guarded panel dismiss-only. Reka reports touch presses outside a
diff --git a/src/pages/AccountPage.vue b/src/pages/AccountPage.vue
index ab0fb07..59c2c65 100644
--- a/src/pages/AccountPage.vue
+++ b/src/pages/AccountPage.vue
@@ -289,7 +289,7 @@ onBeforeUnmount(() => {
     <template v-else-if="isAuthenticated">
       <!-- The header floats over the page like the chat header and Profile info, so the form blurs under it. -->
       <header class="pointer-events-none sticky top-0 z-20 px-3 pb-12 pt-3 sm:px-5">
-        <span class="harbor-chat-header-fade absolute inset-0 -z-10" aria-hidden="true" />
+        <span class="harbor-chat-header-fade absolute inset-0 -z-10" aria-hidden="true" data-system-bar-layer />
         <div class="mx-auto flex max-w-3xl items-center gap-3">
           <button
             type="button"
@@ -308,7 +308,7 @@ onBeforeUnmount(() => {
         :initial="{ opacity: 0, y: 12 }"
         :animate="{ opacity: 1, y: 0 }"
         :transition="{ duration: 0.32, ease: [0.22, 1, 0.36, 1] }"
-        class="mx-auto -mt-12 max-w-3xl space-y-8 px-4 pb-10 sm:px-6"
+        class="mx-auto -mt-12 max-w-3xl space-y-8 px-4 pb-10 max-sm:pb-[calc(2.5rem+var(--liquid-bar-bottom)+var(--liquid-bar-height))] sm:px-6"
       >
         <section class="flex flex-col items-center gap-5 pt-2 text-center">
           <DropdownMenu>
diff --git a/src/pages/DashboardPage.vue b/src/pages/DashboardPage.vue
index bd8b39a..2d56327 100644
--- a/src/pages/DashboardPage.vue
+++ b/src/pages/DashboardPage.vue
@@ -2227,7 +2227,6 @@ const callingMeetingId = ref<string | null>(null);
 function openCallDetails(meeting: MeetingSession) {
   callDetailsMeeting.value = meeting;
   isCallDetailsOpen.value = true;
-  void markCallRead(meeting);
 }
 
 function openCallParticipantProfile(person: MeetingPerson) {
@@ -2320,46 +2319,6 @@ async function loadBadges() {
 }
 const refreshBadges = useDebounceFn(loadBadges, 400);
 
-// Opening a missed call or swiping it left marks it read, which clears its dot and badge count.
-async function markCallRead(meeting: MeetingSession) {
-  const token = accessToken.value;
-  if (!token || !meeting.unread) return;
-  callHistory.setUnread(meeting.id, false);
-  badgeRequest += 1;
-  badges.value = { ...badges.value, calls: Math.max(badges.value.calls - 1, 0) };
-  try {
-    await socialApi.markMeetingRead(token, meeting.id);
-  } catch (error) {
-    console.error('[Dashboard] Failed to mark call read:', error);
-    callHistory.setUnread(meeting.id, true);
-    toast({ title: 'Could not mark the call read.', variant: 'destructive' });
-  } finally {
-    void refreshBadges();
-  }
-}
-
-async function toggleCallRead(meeting: MeetingSession) {
-  if (meeting.unread) {
-    await markCallRead(meeting);
-    return;
-  }
-  if (!meeting.missed) return;
-
-  const token = accessToken.value;
-  if (!token) return;
-  callHistory.setUnread(meeting.id, true);
-  badges.value = { ...badges.value, calls: badges.value.calls + 1 };
-  try {
-    await socialApi.markMeetingUnread(token, meeting.id);
-  } catch (error) {
-    console.error('[Dashboard] Failed to mark call unread:', error);
-    callHistory.setUnread(meeting.id, false);
-    toast({ title: 'Could not mark the call unread.', variant: 'destructive' });
-  } finally {
-    void refreshBadges();
-  }
-}
-
 // Reading a chat, answering a request or a call ending changes these, so the counts are fetched again.
 watch(
   () => [
@@ -2422,7 +2381,7 @@ async function startConversationCall(conversation: Conversation, options?: { vid
       hasSelectedConversation
         ? // Below lg an open chat fills the screen; tablets keep the floating top tabs, so it starts under them.
           'fixed inset-0 h-[100dvh] sm:max-lg:!pt-[calc(var(--liquid-bar-height-sm)+1.5rem)] lg:static lg:h-full'
-        : 'h-full max-sm:[--sidebar-bottom-inset:calc(max(1rem,env(safe-area-inset-bottom))+var(--liquid-bar-height)+12px)]'
+        : 'h-full max-sm:[--sidebar-bottom-inset:calc(var(--liquid-bar-bottom)+var(--liquid-bar-height)+12px)]'
     "
   >
     <motion.div
@@ -2529,7 +2488,6 @@ async function startConversationCall(conversation: Conversation, options?: { vid
         <CallsSidebar
           v-show="activeSidebarSection === 'calls'"
           :panel="callsPanel"
-          :badge="badges.calls"
           :meetings="callHistory.meetings.value"
           :self-avatar-url="ownAvatarUrl ?? undefined"
           :call-group="callGroup"
@@ -2543,7 +2501,6 @@ async function startConversationCall(conversation: Conversation, options?: { vid
           @open="openCallDetails"
           @call="callAgain"
           @start-meeting="createMeeting"
-          @toggle-read="toggleCallRead"
           @load-more="callHistory.loadMore"
         />
       </aside>
diff --git a/src/services/__tests__/system-alerts.test.ts b/src/services/__tests__/system-alerts.test.ts
index fa50e47..0eb1578 100644
--- a/src/services/__tests__/system-alerts.test.ts
+++ b/src/services/__tests__/system-alerts.test.ts
@@ -290,4 +290,34 @@ describe('SystemAlerts in the native app', () => {
     expect(ringtoneStart).toHaveBeenCalledOnce();
     alerts.stop();
   });
+
+  it('rings only in the app bar while the app is visible, even when its webview reports no focus', async () => {
+    vi.spyOn(document, 'visibilityState', 'get').mockReturnValue('visible');
+    const ringtoneStart = vi.spyOn(Ringtone.prototype, 'start').mockImplementation(() => undefined);
+    const { alerts } = createAlerts();
+    await alerts.start();
+
+    alerts.show(callAlert);
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    expect(nativeNotifications.showNativeCallNotification).not.toHaveBeenCalled();
+    expect(ringtoneStart).toHaveBeenCalled();
+    alerts.stop();
+  });
+
+  it('swaps a call notification for the app bar when the app comes to the front', async () => {
+    const visibility = vi.spyOn(document, 'visibilityState', 'get').mockReturnValue('hidden');
+    const ringtoneStart = vi.spyOn(Ringtone.prototype, 'start').mockImplementation(() => undefined);
+    const { alerts } = createAlerts();
+    await alerts.start();
+    alerts.show(callAlert);
+    await vi.waitFor(() => expect(nativeNotifications.showNativeCallNotification).toHaveBeenCalled());
+
+    visibility.mockReturnValue('visible');
+    document.dispatchEvent(new Event('visibilitychange'));
+
+    expect(nativeNotifications.dismissNativeCallNotification).toHaveBeenCalledWith('call-1', 'session');
+    expect(ringtoneStart).toHaveBeenCalled();
+    alerts.stop();
+  });
 });
diff --git a/src/services/__tests__/system-bars.test.ts b/src/services/__tests__/system-bars.test.ts
index c22daea..751bd98 100644
--- a/src/services/__tests__/system-bars.test.ts
+++ b/src/services/__tests__/system-bars.test.ts
@@ -1,6 +1,6 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { startSystemBarSync } from '@/services/system-bars';
+import { coverScreenTop, deviceCornerRadius, startSystemBarSync } from '@/services/system-bars';
 
 const tauri = vi.hoisted(() => ({ isTauri: vi.fn(() => false), invoke: vi.fn(() => Promise.resolve()) }));
 vi.mock('@tauri-apps/api/core', () => tauri);
@@ -148,4 +148,23 @@ describe('system bars', () => {
 
     expect(tauri.invoke).toHaveBeenCalledTimes(1);
   });
+
+  it('covers the status bar area while any reason holds, and tells the app only when that changes', () => {
+    tauri.isTauri.mockReturnValue(true);
+    coverScreenTop('chat', true);
+    coverScreenTop('call', true);
+    coverScreenTop('chat', false);
+    coverScreenTop('call', false);
+
+    expect(tauri.invoke.mock.calls).toEqual([
+      ['set_screen_edges', { top: true, bottom: true }],
+      ['set_screen_edges', { top: false, bottom: true }],
+    ]);
+  });
+
+  it('knows the corner radius of rounded iPhone screens by size, in either orientation', () => {
+    expect(deviceCornerRadius(393, 852)).toBe(55);
+    expect(deviceCornerRadius(852, 393)).toBe(55);
+    expect(deviceCornerRadius(375, 667)).toBe(0);
+  });
 });
diff --git a/src/services/system-alerts.ts b/src/services/system-alerts.ts
index 4d211eb..6b2aeb6 100644
--- a/src/services/system-alerts.ts
+++ b/src/services/system-alerts.ts
@@ -35,6 +35,8 @@ interface RingingCall {
   callKind: AlertCallKind;
   alertedAt: number;
   webNotification: Notification | null;
+  /** The OpenMeet app shows a system notification for it, because the call came while the app was away. */
+  nativeShown: boolean;
 }
 
 function blobToDataUrl(blob: Blob) {
@@ -46,8 +48,11 @@ function blobToDataUrl(blob: Blob) {
   });
 }
 
+// The OpenMeet app is in front whenever its page is visible: its webview does not always report focus, and a
+// missed focus would show a system notification on top of the app's own incoming call bar. A browser tab can be
+// visible in a window behind another one, so there it must also have focus.
 function isAppInFront() {
-  return document.visibilityState === 'visible' && document.hasFocus();
+  return document.visibilityState === 'visible' && (hasNativeNotifications() || document.hasFocus());
 }
 
 /**
@@ -65,8 +70,22 @@ export class SystemAlerts {
 
   constructor(private readonly options: SystemAlertsOptions) {}
 
+  // Coming back to the app while a call rings: the incoming call bar takes over from the system notification.
+  private readonly handleVisibility = () => {
+    if (document.visibilityState !== 'visible') return;
+    for (const [callId, call] of this.calls) {
+      if (!call.nativeShown) continue;
+      call.nativeShown = false;
+      dismissNativeCallNotification(callId, call.callKind).catch((error) =>
+        console.error('[SystemAlerts] Failed to dismiss call notification:', error),
+      );
+      this.ringtone.start();
+    }
+  };
+
   async start() {
     if (!this.native || this.nativeSession) return;
+    document.addEventListener('visibilitychange', this.handleVisibility);
     try {
       this.nativeSession = await startNativeNotifications(
         this.actionLabels(),
@@ -81,6 +100,7 @@ export class SystemAlerts {
   }
 
   stop() {
+    document.removeEventListener('visibilitychange', this.handleVisibility);
     this.generation += 1;
     this.dismissAllCalls();
     this.nativeSession?.stop();
@@ -173,7 +193,12 @@ export class SystemAlerts {
     const body = alert.conversationTitle
       ? translate('notifications.groupCallBody', { name: alert.callerName })
       : translate('notifications.callBody');
-    const call: RingingCall = { callKind: alert.callKind, alertedAt: Date.now(), webNotification: null };
+    const call: RingingCall = {
+      callKind: alert.callKind,
+      alertedAt: Date.now(),
+      webNotification: null,
+      nativeShown: false,
+    };
     this.calls.set(alert.callId, call);
     const generation = this.generation;
 
@@ -188,6 +213,12 @@ export class SystemAlerts {
       void this.avatarBytes(alert.avatarUrl)
         .then((avatar) => {
           if (generation !== this.generation || !this.nativeSession || !isRinging()) return;
+          // The app came to the front while the avatar loaded: its own bar shows the call, so it rings in the app.
+          if (isAppInFront()) {
+            this.ringtone.start();
+            return;
+          }
+          call.nativeShown = true;
           return showNativeCallNotification({ callId: alert.callId, callKind: alert.callKind, title, body, avatar });
         })
         .catch((error) => console.error('[SystemAlerts] Failed to show call notification:', error));
diff --git a/src/services/system-bars.ts b/src/services/system-bars.ts
index d17b8a2..66a62d9 100644
--- a/src/services/system-bars.ts
+++ b/src/services/system-bars.ts
@@ -175,8 +175,52 @@ function paint(colors: SystemBarColors) {
   }
 }
 
+// What wants the page to cover the status bar area, such as an open chat or a full screen call in portrait.
+const topCovers = new Set<string>();
+
+/**
+ * Lets the page reach under the status bar for `reason` (an open chat, a full screen call), or stops. The OpenMeet
+ * iOS app always lets the page cover the home indicator area, and covers the status bar area while any reason
+ * holds (`set_screen_edges`); browsers ignore it. What the page draws there pads itself with
+ * `env(safe-area-inset-*)`, which reads the real insets of the covered areas.
+ */
+export function coverScreenTop(reason: string, cover: boolean) {
+  const covered = topCovers.size > 0;
+  if (cover) topCovers.add(reason);
+  else topCovers.delete(reason);
+  if (!isTauri() || covered === topCovers.size > 0) return;
+  invoke('set_screen_edges', { top: topCovers.size > 0, bottom: true }).catch((error) =>
+    console.error('[SystemBars] Failed to change the screen edges:', error),
+  );
+}
+
+// The screen's corner radius on iPhones with rounded displays, by their size in points (portrait width x height).
+// iOS keeps the real value private, so this follows Apple's published screen sizes; where two models share a size,
+// the smaller radius is used, which only rounds a little less than the glass.
+const IPHONE_CORNER_RADII: Record<string, number> = {
+  '375x812': 39,
+  '414x896': 39,
+  '390x844': 47.33,
+  '428x926': 53.33,
+  '393x852': 55,
+  '430x932': 55,
+  '402x874': 62,
+  '440x956': 62,
+};
+
+/** The corner radius of a phone screen this size, in CSS pixels, or 0 for square corners or an unknown size. */
+export function deviceCornerRadius(width: number, height: number): number {
+  const [short, long] = width < height ? [width, height] : [height, width];
+  return IPHONE_CORNER_RADII[`${Math.round(short)}x${Math.round(long)}`] ?? 0;
+}
+
 /** Starts following the page background; returns a function that stops. */
 export function startSystemBarSync(): () => void {
+  // Lets a full screen call round its video like the glass around it (see VideoGrid).
+  if (isTauri()) {
+    const radius = deviceCornerRadius(window.screen.width, window.screen.height);
+    if (radius) document.documentElement.style.setProperty('--device-corner-radius', `${radius}px`);
+  }
   let painted: SystemBarColors | null = null;
   let frame: number | null = null;