Fix layout switches not showing their state on the combined docs page

On the combined Storybook docs page for the call footer, the layout switches would not show the correct state until you hovered over them because they all shared the same input name and thus were interpreted as belonging to the same radio group.
Only show layout switch when it has an effect on the layout
2026-08-20 20:49:20 +00:00 · 2026-07-28 15:06:15 +02:00 · 2026-07-28 15:06:15 +02:00 · 2026-07-28 15:06:15 +02:00 · 2026-07-28 14:29:30 +02:00 · 2026-07-28 14:08:48 +02:00
47 changed files with 1057 additions and 598 deletions
--- a/.github/workflows/test.yaml
+++ b/.github/workflows/test.yaml
@@ -56,8 +56,8 @@ jobs:
        run: pnpm exec playwright install --with-deps
      - name: Run backend components
        run: |
-          docker compose -f playwright-backend-docker-compose.yml -f playwright-backend-docker-compose.override.yml pull
-          docker compose -f playwright-backend-docker-compose.yml -f playwright-backend-docker-compose.override.yml up -d
+          docker compose -f docker-compose-dev.yml -f docker-compose-playwright.yml pull
+          docker compose -f docker-compose-dev.yml -f docker-compose-playwright.yml up -d
          docker ps
      - name: Run Playwright tests
        env:
--- a/README.md
+++ b/README.md
@@ -212,7 +212,7 @@ See also:

 ### Backend

-A docker compose file `dev-backend-docker-compose.yml` is provided to start the
+A docker compose file `docker-compose-dev.yml` is provided to start the
 whole stack of components which is required for a local development environment
 including federation:

@@ -239,7 +239,7 @@ the backend components:
 ```sh
 pnpm backend
 # or for podman-compose:
-# podman-compose -f dev-backend-docker-compose.yml up
+# podman-compose -f docker-compose-dev.yml up
 ```

 > [!NOTE]
--- a/dev-backend-docker-compose.yml
+++ b/dev-backend-docker-compose.yml
@@ -156,7 +156,7 @@ services:
  nginx:
    #  see backend/dev_tls_setup for how to generate the tls certs
    hostname: synapse.m.localhost
-    image: nginx:latest
+    image: nginx:latest@sha256:4ae259ae64fbedb67918c07d167fdcb0e05855a1615480ca445bea485e7d65ff
    pull_policy: always
    volumes:
      - ./backend/dev_nginx.conf:/etc/nginx/conf.d/default.conf:Z
--- a/docker-compose-playwright.yml
+++ b/docker-compose-playwright.yml
@@ -0,0 +1,19 @@
+# This file contains overrides to docker-compose-dev.yml and should
+# only be used in combination with that file.
+services:
+  synapse:
+    # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
+    image: ghcr.io/element-hq/synapse:latest@sha256:da325af40104051923899e5f5a2f1d537e6e3ccf2f0f38285689ae9bbfdb190a
+    volumes:
+      - ./backend/playwright_homeserver.yaml:/data/cfg/homeserver.yaml:Z
+  synapse-1:
+    # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
+    image: ghcr.io/element-hq/synapse:latest@sha256:da325af40104051923899e5f5a2f1d537e6e3ccf2f0f38285689ae9bbfdb190a
+    volumes:
+      - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
+  element-web:
+    # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
+    image: ghcr.io/element-hq/element-web:develop@sha256:d1841828a390d96da2ee64232949db641f11766fb506ec561374819d10533b9a
+  element-web-1:
+    # Pin to a SHA so that upstream cannot break our tests. Renovate handles regular updates.
+    image: ghcr.io/element-hq/element-web:develop@sha256:d1841828a390d96da2ee64232949db641f11766fb506ec561374819d10533b9a
--- a/knip.ts
+++ b/knip.ts
@@ -20,7 +20,12 @@ export default {
    // This is a shell built-in.
    "printf",
  ],
-  ignoreFiles: ["scripts/.pnpmfile.cjs"],
+  ignoreFiles: [
+    "scripts/.pnpmfile.cjs",
+    // Deliberately added prior to any component or business logic
+    // implementation
+    "src/state/ServiceInterruptionsViewModel.ts",
+  ],
  ignoreDependencies: [
    // Used in CSS
    "normalize.css",
--- a/locales/cs/app.json
+++ b/locales/cs/app.json
@@ -102,11 +102,15 @@
    "connection_lost_description": "Hovor byl přerušen.",
    "e2ee_unsupported": "Nekompatibilní prohlížeč",
    "e2ee_unsupported_description": "Váš webový prohlížeč nepodporuje šifrované hovory. Mezi podporované prohlížeče patří Chrome, Safari a Firefox 117+.",
+    "failed_to_start_livekit": "Nepodařilo se navázat připojení k Livekitu",
    "generic": "Něco se pokazilo.",
    "generic_description": "Odeslání protokolů ladění nám pomůže vystopovat problém.",
    "insufficient_capacity": "Nedostatečná kapacita",
    "insufficient_capacity_description": "Server dosáhl své maximální kapacity a v tuto chvíli se nemůžete připojit k hovoru. Zkuste to později nebo se obraťte na správce serveru, pokud problém přetrvává.",
    "matrix_rtc_transport_missing": "Server není nakonfigurován pro práci s {{brand}}. Obraťte se na správce serveru (Doména: {{domain}}, Kód chyby: {{ errorCode }}).",
+    "membership_manager": "Chyba Správce členství",
+    "membership_manager_description": "Správce členství musel být ukončen. To je způsobeno mnoha po sobě jdoucími neúspěšnými síťovými požadavky.",
+    "no_matrix_2_authorization_service": "Autorizační služba vašeho mediálního serveru (SFU) je zastaralá.",
    "open_elsewhere": "Otevřeno na jiné kartě",
    "open_elsewhere_description": "{{brand}} byl otevřen v jiné záložce. Pokud to nezní správně, zkuste stránku znovu načíst.",
    "room_creation_restricted": "Nepodařilo se vytvořit hovor",
@@ -141,6 +145,7 @@
  },
  "layout_grid_label": "Mřížka",
  "layout_spotlight_label": "Soustředěný mód",
+  "layout_switch_label": "Rozvržení",
  "lobby": {
    "ask_to_join": "Žádost o připojení k hovoru",
    "join_as_guest": "Připojte se jako host",
@@ -241,11 +246,14 @@
  "version": "{{productName}}verze: {{version}}",
  "video_tile": {
    "always_show": "Vždy zobrazit",
+    "call_ended": "Hovor ukončen",
+    "calling": "Volání…",
    "camera_starting": "Načítání videa...",
    "collapse": "Sbalit",
    "expand": "Rozbalit",
    "mute_for_me": "Pro mě ztlumit",
    "muted_for_me": "Pro mě ztlumené",
+    "screen_share_volume": "Hlasitost sdílení obrazovky",
    "volume": "Hlasitost",
    "waiting_for_media": "Čekání na média..."
  }
--- a/locales/et/app.json
+++ b/locales/et/app.json
@@ -3,6 +3,7 @@
    "user_menu": "Kasutajamenüü"
  },
  "action": {
+    "blur_background": "Hägusta tausta",
    "close": "Sulge",
    "copy_link": "Kopeeri link",
    "edit": "Muuda",
@@ -72,8 +73,20 @@
    "environment_variables": "Keskkonnamuutujad",
    "hostname": "Hosti nimi: {{hostname}}",
    "livekit_server_info": "LiveKiti serveri teave",
-    "livekit_sfu": "LiveKit SFU: {{url}}",
+    "livekit_sfu": "LiveKiti meediaedastusserver (SFU): {{url}}",
    "matrixRTCMode": {
+      "Comptibility": {
+        "description": "Ühildub koduserveritega, mis ei toeta määratud kestusega sündmuseid (kuid kõik teised EC kliendid on v0.17.0 või hilisemad)",
+        "label": "Ühilduvus: olekusündmused ja mitu meediaedastusserverit (SFU)"
+      },
+      "Legacy": {
+        "description": "Ühildub EC vanemate versioonidega, millel puudub mitme meediaedastusserveri (SFU) tugi",
+        "label": "Vana lahendus: oleku üritused ja vanim meediaedastusserver (SFU)"
+      },
+      "Matrix_2_0": {
+        "description": "Ühildub ainult määratud kestusega sündmuseid toetavate koduserveritega ja kõigi EC-klientidega alates versioonist 0.17.0",
+        "label": "Matrix 2.0: määratud kestusega sündmused ja mitu meediaedastusserverit (SFU)"
+      },
      "title": "MatrixRTC režiim"
    },
    "matrix_id": "Matrixi kasutajatunnus: {{id}}",
@@ -95,13 +108,20 @@
    "generic_description": "Silumis- ja vealogide saatmine võib aidata meid vea põhjuseni jõuda.",
    "insufficient_capacity": "Mittepiisav jõudlus",
    "insufficient_capacity_description": "Serveri jõudluse ülempiir on hetkel ületatud ja sa ei saa hetkel selle kõnega liituda. Proovi hiljem uuesti või kui probleem kestab kauem, siis võta ühendust serveri haldajaga.",
+    "livekit_connection_error": "Livekiti serveriga ühendamine ei õnnestunud",
+    "livekit_connection_error_description": "Livekiti serveriga ühendamisel tekkis viga (<1>Põhjus: </1> <2>{{ reason }}</2>).",
    "matrix_rtc_transport_missing": "See server pole seadistatud töötama rakendusega {{brand}}. Palun võta ühendust serveri halduriga (domeen: {{domain}}, veakood: {{ errorCode }}).",
    "membership_manager": "Viga liikmelisuse haldamisel",
    "membership_manager_description": "Liikmelisuse haldur pidi oma töö lõpetama. Selle põhjuseks olid paljud järjestikused ebaõnnestunud võrgupäringud.",
+    "no_matrix_2_authorization_service": "Sinu meediaedastusserveri (SFU) autoriseerimisteenus on aegunud.",
    "open_elsewhere": "Avatud teisel vahekaardil",
    "open_elsewhere_description": "{{brand}} on avatud teisel vahekaardil. Kui see ei tundu olema õige, proovi selle lehe uuesti laadimist.",
+    "peer_connection_timeout": "Ühendus aegus",
+    "peer_connection_timeout_description": "Meediaserveriga ühenduspäring aegus. Proovi kasutada muud võrku või keelata VPN-i kasutamine. Kui probleem püsib, vaata meie <0> veaotsingu juhendit</0> või võta ühendust oma serveri peakasutajaga.",
    "room_creation_restricted": "Kõne loomine ei õnnestunud",
    "room_creation_restricted_description": "Kõne loomine võib olla lubatud ainult volitatud kasutajatele. Proovi hiljem uuesti või probleemi püsimisel võta ühendust oma serveri haldajaga.",
+    "sticky_events_required": "Koduserver ei toeta Matrix 2.0 kõnesid",
+    "sticky_events_required_description": "See server on seadistatud kasutama Matrix 2.0 kõnerežiimi, kuid koduserver ei teata, et tal selleks vajalike sündmuste (MSC4354) tugi. Palu serveri peakasutajal see uuendada või kasuta koduserveris ühilduvat režiimi.",
    "unexpected_ec_error": "Tekkis ootamatu viga (<0>Veakood:</0> <1>{{ errorCode }}</1>). Palun võta ühendust serveri haldajaga."
  },
  "group_call_loader": {
@@ -132,6 +152,7 @@
  },
  "layout_grid_label": "Ruudustik",
  "layout_spotlight_label": "Rambivalgus",
+  "layout_switch_label": "Paigutus",
  "lobby": {
    "ask_to_join": "Küsi võimalust liituda kõnega",
    "join_as_guest": "Liitu külalisena",
@@ -184,6 +205,7 @@
    "blur_not_supported_by_browser": "(Tausta hägustamine pole selles seadmes toetatud.)",
    "developer_tab_title": "Arendaja",
    "devices": {
+      "activating": "Aktiveerin…",
      "camera": "Kaamera",
      "camera_numbered": "Kaamera {{n}}",
      "change_device_button": "Muuda heliseadet",
@@ -223,6 +245,7 @@
  "stop_video_button_label": "Peata videovoog",
  "submitting": "Saadan…",
  "switch_camera": "Vaheta kaamerat",
+  "technical_details": "Tehnilised üksikasjad",
  "unauthenticated_view_body": "Sa pole veel registreerunud? <2>Loo kasutajakonto</2>",
  "unauthenticated_view_login_button": "Logi oma kontosse sisse",
  "unauthenticated_view_ssla_caption": "Klõpsides „Jätka“ nõustud sa meie <2>Tarkvara ja teenuste litsentseerimise lepinguga (Software and Services License Agreement - SSLA)</2>",
@@ -230,11 +253,14 @@
  "version": "{{productName}}, versioon: {{version}}",
  "video_tile": {
    "always_show": "Näita alati",
+    "call_ended": "Kõne lõppes",
+    "calling": "Helistan…",
    "camera_starting": "Video on laadimisel...",
    "collapse": "Näita vähem",
    "expand": "Näita rohkem",
    "mute_for_me": "Summuta minu jaoks",
    "muted_for_me": "Minule summutatud",
+    "screen_share_volume": "Helivaljus ekraanijagaamisel",
    "volume": "Helivaljus",
    "waiting_for_media": "Ootame kuni meedia on olemas..."
  }
--- a/locales/fi/app.json
+++ b/locales/fi/app.json
@@ -3,6 +3,7 @@
    "user_menu": "Käyttäjävalikko"
  },
  "action": {
+    "blur_background": "Sumenna tausta",
    "close": "Sulje",
    "copy_link": "Kopioi linkki",
    "edit": "Muokkaa",
@@ -107,14 +108,20 @@
    "generic_description": "Vianmäärityslokien lähettäminen auttaa meitä jäljittämään ongelman.",
    "insufficient_capacity": "Riittämätön kapasiteetti",
    "insufficient_capacity_description": "Palvelin on saavuttanut maksimikapasiteettinsa, etkä voi liittyä puheluun tällä hetkellä. Yritä myöhemmin uudelleen tai ota yhteyttä palvelimen ylläpitäjään, jos ongelma jatkuu.",
+    "livekit_connection_error": "Yhteyden muodostaminen Livekit-palvelimeen epäonnistui",
+    "livekit_connection_error_description": "Livekit-palvelimeen yhteyden muodostamisessa tapahtui virhe (<1>Syy: </1> <2>{{ reason }}</2>).",
    "matrix_rtc_transport_missing": "Palvelinta ei ole määritetty toimimaan {{brand}} -sovelluksen kanssa. Ota yhteyttä palvelimen ylläpitäjään (Verkkotunnus: {{domain}}, Virhekoodi: {{ errorCode }}).",
    "membership_manager": "Jäsenyydenhallinnan virhe",
    "membership_manager_description": "Jäsenyyshallinta jouduttiin sulkemaan. Tämä johtui useista peräkkäisistä epäonnistuneista verkkopyynnöistä.",
    "no_matrix_2_authorization_service": "Mediapalvelimesi (SFU) valtuutuspalvelu on vanhentunut.",
    "open_elsewhere": "Avattu toisessa välilehdessä",
    "open_elsewhere_description": "{{brand}} on avattu toisessa välilehdessä. Jos tämä ei kuulosta oikealta, yritä ladata sivu uudelleen.",
+    "peer_connection_timeout": "Yhteyden aikakatkaisu",
+    "peer_connection_timeout_description": "Yhteys mediapalvelimeen aikakatkaistiin. Kokeile vaihtaa verkkoa tai poistaa VPN käytöstä. Jos ongelma jatkuu, katso <0>vianetsintäoppaamme</0> tai ota yhteyttä palvelimesi ylläpitäjään.",
    "room_creation_restricted": "Puhelun luominen epäonnistui",
    "room_creation_restricted_description": "Puheluiden luominen saattaa olla rajoitettu vain valtuutetuille käyttäjille. Yritä myöhemmin uudelleen tai ota yhteyttä palvelimen ylläpitäjään, jos ongelma jatkuu.",
+    "sticky_events_required": "Kotipalvelin ei tue Matrix 2.0 -puheluita",
+    "sticky_events_required_description": "Tämä asennus on määritetty käyttämään Matrix 2.0 -puhelutilaa, mutta kotipalvelin ei mainosta tukea tarttuville tapahtumille (MSC4354). Pyydä palvelimen järjestelmänvalvojaa päivittämään tai vaihtamaan asennus yhteensopivaan tilaan.",
    "unexpected_ec_error": "Tapahtui odottamaton virhe (<0>Virhekoodi:</0> <1>{{ errorCode }}</1>). Ota yhteyttä palvelimen ylläpitäjään."
  },
  "group_call_loader": {
@@ -145,6 +152,7 @@
  },
  "layout_grid_label": "Ruudukko",
  "layout_spotlight_label": "Valokeila",
+  "layout_switch_label": "Asettelu",
  "lobby": {
    "ask_to_join": "Pyydä liittymistä puheluun",
    "join_as_guest": "Liity vieraana",
@@ -197,6 +205,7 @@
    "blur_not_supported_by_browser": "(Tämä laite ei tue taustan sumennusta.)",
    "developer_tab_title": "Kehittäjä",
    "devices": {
+      "activating": "Aktivoidaan…",
      "camera": "Kamera",
      "camera_numbered": "Kamera {{n}}",
      "change_device_button": "Vaihda äänilaite",
@@ -236,6 +245,7 @@
  "stop_video_button_label": "Lopeta video",
  "submitting": "Lähetetään…",
  "switch_camera": "Vaihda kameraa",
+  "technical_details": "Tekniset tiedot",
  "unauthenticated_view_body": "Etkö ole vielä rekisteröitynyt? <2>Luo tili</2>",
  "unauthenticated_view_login_button": "Kirjaudu tilillesi",
  "unauthenticated_view_ssla_caption": "Klikkaamalla \"Siirry\" hyväksyt <2>ohjelmisto- ja palvelulisenssisopimuksen (SSLA)</2>",
--- a/locales/pl/app.json
+++ b/locales/pl/app.json
@@ -3,6 +3,7 @@
    "user_menu": "Menu użytkownika"
  },
  "action": {
+    "blur_background": "Rozmycie tła",
    "close": "Zamknij",
    "copy_link": "Kopiuj link",
    "edit": "Edytuj",
@@ -21,7 +22,7 @@
    "submit": "Wyślij",
    "upload_file": "Prześlij plik"
  },
-  "analytics_notice": "Uczestnicząc w tej becie, upoważniasz nas do zbierania anonimowych danych, które wykorzystamy do ulepszenia produktu. Dowiedz się więcej na temat danych, które zbieramy w naszej <2>Polityce prywatności</2> i <5>Polityce ciasteczek</5>.",
+  "analytics_notice": "Biorąc udział w wersji beta, wyrażasz zgodę na gromadzenie anonimowych danych, które wykorzystujemy w celu ulepszenia naszego produktu. Więcej informacji na temat danych, które śledzimy, znajdziesz w naszej <2>Polityce prywatności</2> dla i <6>Polityce ciasteczek</6>.",
  "call_ended_view": {
    "create_account_button": "Utwórz konto",
    "create_account_prompt": "<0>Może zechcesz ustawić hasło, aby zachować swoje konto?</0><1>Będziesz w stanie utrzymać swoją nazwę i ustawić awatar do wyświetlania podczas połączeń w przyszłości</1>",
@@ -41,7 +42,7 @@
    "display_name": "Nazwa wyświetlana",
    "encrypted": "Szyfrowane",
    "home": "Strona domowa",
-    "loading": "Ładowanie…",
+    "loading": "Wczytywanie…",
    "next": "Dalej",
    "options": "Opcje",
    "password": "Hasło",
@@ -58,6 +59,14 @@
  "developer_mode": {
    "always_show_iphone_earpiece": "Pokaż opcję słuchawki iPhone na wszystkich platformach",
    "crypto_version": "Wersja krypto: {{version}}",
+    "custom_livekit_url": {
+      "current_url": "Aktualnie ustawione na: ",
+      "from_config": "Aktualnie nie nadpisano ustawienia. Używany jest adres URL z dobrego źródła lub konfiguracji.",
+      "label": "Własny Livekit-url",
+      "reset": "Zresetuj nadpisanie",
+      "save": "Zapisz",
+      "saving": "Zapisuję..."
+    },
    "debug_tile_layout_label": "Układ kafelków Debug",
    "device_id": "ID urządzenia: {{id}}",
    "duplicate_tiles_label": "Liczba dodatkowych kopii kafelków na uczestnika",
@@ -65,6 +74,21 @@
    "hostname": "Nazwa hosta: {{hostname}}",
    "livekit_server_info": "Informacje serwera LiveKit",
    "livekit_sfu": "LiveKit SFU: {{url}}",
+    "matrixRTCMode": {
+      "Comptibility": {
+        "description": "Kompatybilny z serwerami domowymi, które nie obsługują sticky events (ale wszyscy inni klienci EC mają wersję v0.17.0 lub nowszą)",
+        "label": "Kompatybilność: state events & multi SFU"
+      },
+      "Legacy": {
+        "description": "Kompatybilny ze starszymi wersjami EC, które nie wspierają multi SFU",
+        "label": "Przestarzałe: state events & oldest membership SFU"
+      },
+      "Matrix_2_0": {
+        "description": "Kompatybilny tylko z serwerami domowymi obsługującymi sticky events i wszystkimi klientami EC w wersji v0.17.0 lub nowszej",
+        "label": "Matrix 2.0: sticky events & multi SFU"
+      },
+      "title": "Tryb MatrixRTC"
+    },
    "matrix_id": "ID Matrix: {{id}}",
    "mute_all_audio": "Wycisz cały dźwięk (uczestnicy, reakcje, dźwięki dołączenia)",
    "show_connection_stats": "Pokaż statystyki połączenia",
@@ -74,25 +98,36 @@
  "error": {
    "call_is_not_supported": "Połączenie nie jest obsługiwane",
    "call_not_found": "Nie znaleziono połączenia",
-    "call_not_found_description": "<0>Wygląda na to, że ten link nie należy do żadnego istniejącego połączenia. Sprawdź, czy posiadasz prawidłowy link lub <1>utwórz nowy</1>.</0>",
+    "call_not_found_description": "<0>Wygląda na to, że ten link nie należy do żadnego istniejącego połączenia. Sprawdź, czy masz prawidłowy link lub <2> utwórz nowy</2>.</0>",
    "connection_lost": "Utracono połączenie",
    "connection_lost_description": "Zostałeś rozłączony z rozmowy.",
    "e2ee_unsupported": "Niekompatybilna przeglądarka",
    "e2ee_unsupported_description": "Twoja przeglądarka nie wspiera szyfrowanych połączeń. Obsługiwane przeglądarki obejmują Chrome, Safari i Firefox 117+.",
+    "failed_to_start_livekit": "Nie udało się uruchomić połączenia Livekit",
    "generic": "Coś poszło nie tak",
    "generic_description": "Wysłanie dziennika debug, pozwoli nam namierzyć problem.",
    "insufficient_capacity": "Za mało miejsca",
    "insufficient_capacity_description": "Serwer osiągnął maksymalną pojemność, przez co nie możesz dołączyć do połączenia. Spróbuj ponownie później lub skontaktuj się z administratorem serwera, jeśli problem nie zniknie.",
+    "livekit_connection_error": "Nie udało się połączyć z serwerem Livekit",
+    "livekit_connection_error_description": "Wystąpił błąd podczas łączenia się z serwerem Livekit (<1>Przyczyna:</1> <2>{{ reason }}</2>).",
+    "matrix_rtc_transport_missing": "Serwer nie jest skonfigurowany do pracy z {{brand}}. Prosimy o kontakt z administratorem serwera (Domena: {{domain}}, Kod błędu: {{ errorCode }}).",
+    "membership_manager": "Błąd menedżera członkostwa",
+    "membership_manager_description": "Menedżer członkostwa został zamknięty przez zbyt wiele powtarzających się błędów połączenia.",
+    "no_matrix_2_authorization_service": "Usługa autoryzacji dla serwera multimediów (SFU) jest nieaktualna.",
    "open_elsewhere": "Otwarto w innej karcie",
    "open_elsewhere_description": "{{brand}} został otwarty w innej karcie. Jeśli tak nie jest, spróbuj odświeżyć stronę.",
+    "peer_connection_timeout": "Upłynął limit czasu połączenia",
+    "peer_connection_timeout_description": "Upłynął czas oczekiwania na połączenie z serwerem multimediów. Spróbuj połączyć się z inną siecią lub wyłączyć VPN. Jeśli problem nadal występuje, zapoznaj się z naszym <0>poradnikiem rozwiązywania problemów</0> lub skontaktuj się z administratorem serwera.",
    "room_creation_restricted": "Nie udało się utworzyć połączenia",
    "room_creation_restricted_description": "Tworzenie połączeń mogło zostać ograniczone tylko do autoryzowanych użytkowników. Spróbuj ponownie później lub skontaktuj się z administratorem serwera, jeśli problem nie minie.",
+    "sticky_events_required": "Serwer domowy nie wspiera połączeń Matrix 2.0",
+    "sticky_events_required_description": "Wybrana konfiguracja została ustawiona na korzystanie z połączeń Matrix 2.0, lecz serwer domowy nie wspiera ogłaszania sticky events (MSC4354). Poproś administratora serwera o aktualizację lub zmień konfigurację.",
    "unexpected_ec_error": "Wystąpił nieoczekiwany błąd (<0>Kod błędu:</0> <1>{{ errorCode }}</1>). Skontaktuj się z administratorem serwera."
  },
  "group_call_loader": {
    "banned_body": "Zostałeś zbanowany z pokoju.",
    "banned_heading": "Zbanowany",
-    "call_ended_body": "Zostałeś usunięty z rozmowy.",
+    "call_ended_body": "Zostałeś usunięty z połączenia.",
    "call_ended_heading": "Połączenie zakończone",
    "knock_reject_body": "Członkowie pokoju odrzucili Twoją prośbę o dołączenie.",
    "knock_reject_heading": "Nie możesz dołączyć",
@@ -112,17 +147,18 @@
  },
  "join_existing_call_modal": {
    "join_button": "Tak, dołącz do połączenia",
-    "text": "Te połączenie już istnieje, czy chcesz do niego dołączyć?",
+    "text": "Połączenie już istnieje, czy chcesz do niej dołączyć?",
    "title": "Dołączyć do istniejącego połączenia?"
  },
  "layout_grid_label": "Siatka",
  "layout_spotlight_label": "Centrum uwagi",
+  "layout_switch_label": "Układ",
  "lobby": {
-    "ask_to_join": "Poproś o dołączenie do rozmowy",
+    "ask_to_join": "Poproś o dołączenie do połączenia",
    "join_as_guest": "Dołącz jako gość",
    "join_button": "Dołącz do połączenia",
    "leave_button": "Wróć do ostatnie",
-    "waiting_for_invite": "Żądanie wysłane"
+    "waiting_for_invite": "Prośba wysłana! Oczekiwanie na zatwierdzenie…"
  },
  "log_in": "Zaloguj",
  "logging_in": "Logowanie…",
@@ -162,14 +198,15 @@
  "screenshare_button_label": "Udostępnij ekran",
  "settings": {
    "audio_tab": {
-      "effect_volume_description": "Dostosuj głośność, z jaką odtwarzane są efekty reakcji i podniesionej ręki",
-      "effect_volume_label": "Głośność efektu dźwiękowego"
+      "effect_volume_description": "Dostosuj głośność efektów reakcji i podniesienia ręki.",
+      "effect_volume_label": "Głośność efektów dźwiękowych"
    },
    "background_blur_header": "Tło",
    "background_blur_label": "Rozmycie tła wideo",
    "blur_not_supported_by_browser": "(Rozmycie tła nie jest wspierane przez to urządzenie.)",
    "developer_tab_title": "Programista",
    "devices": {
+      "activating": "Aktywuję…",
      "camera": "Kamera",
      "camera_numbered": "Kamera {{n}}",
      "change_device_button": "Zmień urządzenie audio",
@@ -192,7 +229,7 @@
    "preferences_tab": {
      "developer_mode_label": "Tryb programisty",
      "developer_mode_label_description": "Włącz tryb programisty i wyświetl kartę ustawień programisty.",
-      "introduction": "Tutaj możesz skonfigurować dodatkowe opcje dla lepszych doświadczeń.",
+      "introduction": "Tutaj możesz skonfigurować dodatkowe opcje dla lepszego komfortu użytkowania.",
      "reactions_play_sound_description": "Odtwórz efekt dźwiękowy, gdy ktoś wyślę reakcję w trakcie połączenia.",
      "reactions_play_sound_label": "Odtwórz dźwięki reakcji",
      "reactions_show_description": "Odtwórz animację, gdy ktoś wyślę reakcję.",
@@ -201,26 +238,31 @@
      "show_hand_raised_timer_label": "Pokaż czas po podniesieniu ręki"
    }
  },
-  "star_rating_input_label_one": "{{count}} gwiazdki",
-  "star_rating_input_label_other": "{{count}} gwiazdki",
+  "star_rating_input_label_one": "{{count}} gwiazdka",
+  "star_rating_input_label_few": "{{count}} gwiazdki",
+  "star_rating_input_label_many": "{{count}} gwiazdek",
  "start_new_call": "Rozpocznij nowe połączenie",
  "start_video_button_label": "Rozpocznij wideo",
  "stop_screenshare_button_label": "Udostępnianie ekranu",
  "stop_video_button_label": "Zakończ wideo",
  "submitting": "Wysyłanie…",
  "switch_camera": "Przełącz kamerę",
+  "technical_details": "Szczegóły techniczne",
  "unauthenticated_view_body": "Nie masz konta? <2>Utwórz je</2>",
-  "unauthenticated_view_login_button": "Zaloguj się do swojego konta",
+  "unauthenticated_view_login_button": "Zaloguj się na swoje konto",
  "unauthenticated_view_ssla_caption": "Klikając \"Przejdź\", wyrażasz zgodę na naszą <2>Umowę licencyjną oprogramowania i usług (SSLA)</2>",
-  "unmute_microphone_button_label": "Odcisz mikrofon",
-  "version": "Wersja: {{version}}",
+  "unmute_microphone_button_label": "Wyłącz wyciszenie mikrofonu",
+  "version": "{{productName}} wersja: {{version}}",
  "video_tile": {
    "always_show": "Zawsze pokazuj",
+    "call_ended": "Połączenie zakończone",
+    "calling": "Łączenie...",
    "camera_starting": "Wczytywanie wideo...",
    "collapse": "Zwiń",
    "expand": "Rozwiń",
    "mute_for_me": "Wycisz dla mnie",
    "muted_for_me": "Wyciszone dla mnie",
+    "screen_share_volume": "Głośność udostępniania ekranu",
    "volume": "Głośność",
    "waiting_for_media": "Oczekiwanie na media..."
  }
--- a/package.json
+++ b/package.json
@@ -30,8 +30,8 @@
    "test:storybook": "vitest --project=storybook",
    "test:unit": "vitest --project=unit",
    "test:coverage": "vitest --coverage",
-    "backend": "docker-compose -f dev-backend-docker-compose.yml up",
-    "backend-playwright": "docker-compose -f playwright-backend-docker-compose.yml -f playwright-backend-docker-compose.override.yml up",
+    "backend": "docker-compose -f docker-compose-dev.yml up",
+    "backend-playwright": "docker-compose -f docker-compose-dev.yml -f docker-compose-playwright.yml up",
    "test:playwright": "playwright test",
    "test:playwright:open": "pnpm test:playwright --ui",
    "links:on": "cp scripts/.pnpmfile.cjs .pnpmfile.cjs & pnpm install",
--- a/playwright-backend-docker-compose.override.yml
+++ b/playwright-backend-docker-compose.override.yml
@@ -1,7 +0,0 @@
-services:
-  synapse:
-    volumes:
-      - ./backend/playwright_homeserver.yaml:/data/cfg/homeserver.yaml:Z
-  synapse-1:
-    volumes:
-      - ./backend/playwright_homeserver-othersite.yaml:/data/cfg/homeserver.yaml:Z
--- a/playwright-backend-docker-compose.yml
+++ b/playwright-backend-docker-compose.yml
@@ -1,2 +0,0 @@
-include:
-  - dev-backend-docker-compose.yml
--- a/playwright/widget/test-helpers.ts
+++ b/playwright/widget/test-helpers.ts
@@ -73,9 +73,6 @@ export class TestHelpers {
    audioOnly: boolean = false,
    isDM: boolean = false,
  ): Promise<void> {
-    // XXX This using the notification toast to join the room.
-    // Not the button in the header
-
    await page.waitForTimeout(3000);
    const label = isDM
      ? audioOnly
@@ -85,7 +82,9 @@ export class TestHelpers {
    await expect(page.getByText(label)).toBeVisible({
      timeout: 10000,
    });
-    await page.getByRole("button", { name: "Join" }).click({
+    // XXX This using the notification toast to join the room.
+    // Not the buttons in the header or timeline
+    await page.getByRole("alert").getByRole("button", { name: "Join" }).click({
      timeout: 5000,
    });
  }
--- a/playwright/widget/voice-call-dm.spec.ts
+++ b/playwright/widget/voice-call-dm.spec.ts
@@ -39,7 +39,10 @@ widgetTest(
    ).toBeVisible();

    await expect(whistler.page.getByText("Incoming voice call")).toBeVisible();
-    await whistler.page.getByRole("button", { name: "Join" }).click();
+    await whistler.page
+      .getByRole("alert")
+      .getByRole("button", { name: "Join" })
+      .click();

    await expect(
      whistler.page.locator('iframe[title="Element Call"]'),
@@ -129,7 +132,10 @@ widgetTest(
    ).toBeVisible();

    await expect(whistler.page.getByText("Incoming video call")).toBeVisible();
-    await whistler.page.getByRole("button", { name: "Join" }).click();
+    await whistler.page
+      .getByRole("alert")
+      .getByRole("button", { name: "Join" })
+      .click();

    await expect(
      whistler.page.locator('iframe[title="Element Call"]'),
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,11 +10,13 @@ overrides:
  tar: ^7.5.11
  minimatch: ^10.2.3
  glob: ^10.5.0
-  qs: ^6.14.1
-  js-yaml: ^4.1.1
+  qs: ^6.15.2
+  js-yaml: ^4.2.0
  esbuild: ^0.28.0
-  undici: ^6.24.0
+  undici: ^6.27.0
  flatted: ^3.4.2
+  ws: ^8.21.0
+  dompurify: ^3.4.11

 importers:

@@ -127,10 +129,10 @@ importers:
        version: 10.3.1(react@19.2.7)
      '@vector-im/compound-design-tokens':
        specifier: ^10.0.0
-        version: 10.2.2(@types/react@19.2.17)(react@19.2.7)
+        version: 10.2.3(@types/react@19.2.17)(react@19.2.7)
      '@vector-im/compound-web':
        specifier: ^9.3.0
-        version: 9.7.0(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(@vector-im/compound-design-tokens@10.2.2(@types/react@19.2.17)(react@19.2.7))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+        version: 9.8.0(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(@vector-im/compound-design-tokens@10.2.3(@types/react@19.2.17)(react@19.2.7))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
      '@vitejs/plugin-react':
        specifier: ^6.0.2
        version: 6.0.3(vite@8.1.0(@types/node@24.13.2)(esbuild@0.28.1)(jiti@2.7.0)(sass@1.101.0)(terser@5.46.1)(yaml@2.9.0))
@@ -918,20 +920,23 @@ packages:
  '@floating-ui/core@1.7.5':
    resolution: {integrity: sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==}

+  '@floating-ui/core@1.8.0':
+    resolution: {integrity: sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==}
+
  '@floating-ui/dom@1.7.4':
    resolution: {integrity: sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==}

-  '@floating-ui/dom@1.7.6':
-    resolution: {integrity: sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==}
+  '@floating-ui/dom@1.8.0':
+    resolution: {integrity: sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==}

-  '@floating-ui/react-dom@2.1.8':
-    resolution: {integrity: sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==}
+  '@floating-ui/react-dom@2.1.9':
+    resolution: {integrity: sha512-JDjEFGCpImxDCA7JJKviA0M9+RtmJdj0m/NVU5IMgBK+AmZouAQQ7/+2GLH0GXXY0YMw9oXPB8hKdbPYg5QLYg==}
    peerDependencies:
      react: '>=16.8.0'
      react-dom: '>=16.8.0'

-  '@floating-ui/react@0.27.19':
-    resolution: {integrity: sha512-31B8h5mm8YxotlE7/AU/PhNAl8eWxAmjL/v2QOxroDNkTFLk3Uu82u63N3b6TXa4EGJeeZLVcd/9AlNlVqzeog==}
+  '@floating-ui/react@0.27.20':
+    resolution: {integrity: sha512-CMqMy7OaXl9W0eq1Uy7L7i2Y/anPvHmFmESd2CEw0t5YvZhcVCeo4MBevAmswRllX7Y2dEidA4ozGPunLSTQpw==}
    peerDependencies:
      react: '>=17.0.0'
      react-dom: '>=17.0.0'
@@ -939,6 +944,9 @@ packages:
  '@floating-ui/utils@0.2.11':
    resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}

+  '@floating-ui/utils@0.2.12':
+    resolution: {integrity: sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==}
+
  '@fontsource/inconsolata@5.2.8':
    resolution: {integrity: sha512-lIZW+WOZYpUH91g9r6rYYhfTmptF3YPPM54ZOs8IYVeeL4SeiAu4tfj7mdr8llYEq31DLYgi6JtGIJa192gB0Q==}

@@ -2097,6 +2105,9 @@ packages:
  '@radix-ui/primitive@1.1.4':
    resolution: {integrity: sha512-7AdCK9PQyiljKoBDbN8OuctCbd/esdwZPQ8RtOE3SsyQtUpiPb+ND75q0jEhC1m1ecBI0MFNeLJvwIh9iKHRcQ==}

+  '@radix-ui/primitive@1.1.5':
+    resolution: {integrity: sha512-d86WIWFYNtGA0H/d8exstrTRTp7eWJYlYJbtNofxr/3ljupZYn6EFDG/Qgu/0Kc8v7yMUxySagqJsL1+PdYjWg==}
+
  '@radix-ui/react-arrow@1.1.11':
    resolution: {integrity: sha512-Kdil9BB1rIFC/khmf4hC35bn8701AJcizTU7G7cUbEbk5XqqbjDuHW60uUfKqO5WojjZcbAW51Q7P0hRmMLw8A==}
    peerDependencies:
@@ -2123,8 +2134,8 @@ packages:
      '@types/react-dom':
        optional: true

-  '@radix-ui/react-collection@1.1.11':
-    resolution: {integrity: sha512-djW9+zeg137KQdlPtmE8xnaD+K2rcXXMWFrSg0hsmYZ6HRbdTA7tDHFgpaW9+huWVEu0RCabL+985T4TA0BE7g==}
+  '@radix-ui/react-collection@1.1.12':
+    resolution: {integrity: sha512-nb67INpE0IahJKN7EYPp9m9YGwYeKlnzxT3MwXVkgCskaSJia97kG4T0ywpjNUSSnoJk/uvk12V8vbrEHEj+/Q==}
    peerDependencies:
      '@types/react': '*'
      '@types/react-dom': '*'
@@ -2145,8 +2156,8 @@ packages:
      '@types/react':
        optional: true

-  '@radix-ui/react-context-menu@2.3.2':
-    resolution: {integrity: sha512-qzsA/ZPhF6yMxBOTIk1nlCkoy2mswSbwYL+ErBa2iP0s4WWrlxmczArYqMcpVfEjmM7KJj/ADPXky0yZfbSxtQ==}
+  '@radix-ui/react-context-menu@2.3.3':
+    resolution: {integrity: sha512-PS+gKE0z2prJ74Y0sM+brAGK4mYOHIR7TlcV5EJgUQ6E0xMvyswkK2X4yRqyganrzsRL+WCSKAPu0NQITICRWg==}
    peerDependencies:
      '@types/react': '*'
      '@types/react-dom': '*'
@@ -2167,6 +2178,15 @@ packages:
      '@types/react':
        optional: true

+  '@radix-ui/react-context@1.2.0':
+    resolution: {integrity: sha512-fOE+JtN9rygNZkCnHRBEP0TAvLldlhyOxMsbwFvTP4nAs+nBmfnna+o/Zski2wkmY1YMrFC0aSzsHoLY47iLrg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
  '@radix-ui/react-dialog@1.1.17':
    resolution: {integrity: sha512-TDTYmpdq8dI2+Xgvgj9AJ8Ghqq+Eph/TRVEdaFQPDItIY+6QSkU7MJMeevw1568Yw/2Ijz8BTphPSP2XejKphw==}
    peerDependencies:
@@ -2202,8 +2222,8 @@ packages:
      '@types/react-dom':
        optional: true

-  '@radix-ui/react-dismissable-layer@1.1.14':
-    resolution: {integrity: sha512-4lUhWTWAjbDIqFrAPWJ3WqBOpO5YchVZ88X3nh6H9Lu5AFi5nCUeTPj3D8FSDmabmFeRe9ME0BDA4MwKTha5GQ==}
+  '@radix-ui/react-dismissable-layer@1.1.15':
+    resolution: {integrity: sha512-b0XaRlzn2QKuo10XyNgi2DAJDf5XC9d1nD3FJcuvCjbR7+4Ad28zmZsLsqx+hvDEzMnRuZaZxZm9gYObV6RmRA==}
    peerDependencies:
      '@types/react': '*'
      '@types/react-dom': '*'
@@ -2215,8 +2235,8 @@ packages:
      '@types/react-dom':
        optional: true

-  '@radix-ui/react-dropdown-menu@2.1.19':
-    resolution: {integrity: sha512-HZccBkbK0LOi8nYKIp5jll/zIRW0cCOmG6WWyqsSpmXCU+ZlcBbTqIwlBvPCu886C5RVu6c/kHV7xSP8IgYNHw==}
+  '@radix-ui/react-dropdown-menu@2.1.20':
+    resolution: {integrity: sha512-slfm+rRaZRuQBvHq60lXvSVUPhid0IPtjSZzIuUlWZMUs01iYZNlGS3mJgRD3ChLQVBAYlKiL/tFyWGX+dz8Xw==}
    peerDependencies:
      '@types/react': '*'
      '@types/react-dom': '*'
@@ -2250,8 +2270,8 @@ packages:
      '@types/react-dom':
        optional: true

-  '@radix-ui/react-focus-scope@1.1.11':
-    resolution: {integrity: sha512-Mn88Vg2whaRocGJNOH+DKFqYm6ySFPQaiwHNxZPyjn99B52KAEJWWY9NP83+nWdk2HM3rdov+STu9AG471Rt9w==}
+  '@radix-ui/react-focus-scope@1.1.12':
+    resolution: {integrity: sha512-jjk/lqTeNL0azUx5ZYzVrl4NgaDIrdzTNE4mABV9yBFI7FQqN7pIgzV1bTleUezP2QiTGA1BFTqY8MegDgWX9A==}
    peerDependencies:
      '@types/react': '*'
      '@types/react-dom': '*'
@@ -2263,8 +2283,8 @@ packages:
      '@types/react-dom':
        optional: true

-  '@radix-ui/react-form@0.1.11':
-    resolution: {integrity: sha512-0mTMJHv1gQAuEQoq5VDpTD3MRgmfUFdXAVFhpqR7wBeUr+tyRsof0wv/4XdPHLwQrefhoH2FiGHCggrCJhalIw==}
+  '@radix-ui/react-form@0.1.12':
+    resolution: {integrity: sha512-JTX94E4LDL91rzLg7X0mHPdxr0A8JEdVwZEmeOwZJSMDHCGW5DFtSlTSJozUyUs807IQmnvbfzKZFVCK5DmkqQ==}
    peerDependencies:
      '@types/react': '*'
      '@types/react-dom': '*'
@@ -2298,8 +2318,8 @@ packages:
      '@types/react-dom':
        optional: true

-  '@radix-ui/react-menu@2.1.19':
-    resolution: {integrity: sha512-Mht9BVd1AIsNFVQr4KG3bIK7XQn5IXF0TL/2ObsrzOdc1loaly/+kBDL5roSCYn8j8XZkvpOD0WYLz2FQtH1Eg==}
+  '@radix-ui/react-menu@2.1.20':
+    resolution: {integrity: sha512-VsUrXxFe9d2ScbZF0fR/oPR1+qjyeLs5p0jzG8h90puMoA9bq4SirYlXbE+USRg9Q2qTeJSFNqjw2nts8jJe4w==}
    peerDependencies:
      '@types/react': '*'
      '@types/react-dom': '*'
@@ -2311,8 +2331,8 @@ packages:
      '@types/react-dom':
        optional: true

-  '@radix-ui/react-popper@1.3.2':
-    resolution: {integrity: sha512-3QXNeMkdshed1MR3LNoiCirBywRFPkD8ETJa/HlPuLwSajaQixf2ro+isoDNJlGABg9ug41XuZpINZJIle4XWg==}
+  '@radix-ui/react-popper@1.3.3':
+    resolution: {integrity: sha512-mS7dGpyjv6b+gsDjLF7e0ia1W4Im1B1hSCy2yuXlHuvnZxHKagfDaobt/KAKt27EpZMit2pss8eJBVyVjEWM+g==}
    peerDependencies:
      '@types/react': '*'
      '@types/react-dom': '*'
@@ -2363,6 +2383,19 @@ packages:
      '@types/react-dom':
        optional: true

+  '@radix-ui/react-presence@1.1.7':
+    resolution: {integrity: sha512-zBZ4QM5XG3JRanDmqXYf3MD6th4AFXFmgU6KNMFzUaV6F3uw9I5/zjMUvFriSEn5ewo1nxuibvyxJdmLlDcslA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
  '@radix-ui/react-primitive@2.1.6':
    resolution: {integrity: sha512-wetd0QI77DbvrPpTAvH1SqOxsYF2wZe5TNxqwOd5Ty4XDpV3dpV0s8K/1MGMJBeY5o7lg8ub5VIt1Ub+yVen6g==}
    peerDependencies:
@@ -2389,8 +2422,8 @@ packages:
      '@types/react-dom':
        optional: true

-  '@radix-ui/react-progress@1.1.11':
-    resolution: {integrity: sha512-KqiGJcFaZDc+BvveAgU3ZhACg2MvSUDrCBx4lRR/ZVRNal0bvt8lBpvnSkep9heeOuF8Qfw3fszLDX4OpQ2NVw==}
+  '@radix-ui/react-progress@1.1.12':
+    resolution: {integrity: sha512-ZPHyI0JyzoH/rP0tq2uRaIZTj/4s8+kAbqPz+e2N8+ejHvwPJ889dHhqn+vh7PNvNeq+boAoH9yzqeoShzwF2w==}
    peerDependencies:
      '@types/react': '*'
      '@types/react-dom': '*'
@@ -2402,8 +2435,8 @@ packages:
      '@types/react-dom':
        optional: true

-  '@radix-ui/react-roving-focus@1.1.14':
-    resolution: {integrity: sha512-8Qcnx9447tx/aCBgw6Jenfqg4Skq+vqab9mCBmuGNipIS5YXvL275wbKEu7+ICYHIlAPgCduUMJH1XOYewKF6Q==}
+  '@radix-ui/react-roving-focus@1.1.15':
+    resolution: {integrity: sha512-40svmmugfM3mUN7VUDGVE1tQGOhyi8enlGD0CNJEcMM36C1f71PKM21DFgNHUfem0XnA+d8H8oN3Z9ZpJjSslg==}
    peerDependencies:
      '@types/react': '*'
      '@types/react-dom': '*'
@@ -2486,6 +2519,15 @@ packages:
      '@types/react':
        optional: true

+  '@radix-ui/react-use-is-hydrated@0.1.1':
+    resolution: {integrity: sha512-qwOiz4Tjo8CNnrOLAYUMXeZwDzXgXpvK4TKQPmWLECM9XoWvA6+0Z2/7Ag3A4ivjS4ovbLJPbskkxioFyBhr8A==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
  '@radix-ui/react-use-layout-effect@1.1.2':
    resolution: {integrity: sha512-jrBWOxZITuGcnjRCM2t2U5ZPkCLxD+Ym6DjfssS5haTj2iiak/DOb64JeN6OdLfLgptb6/e2kKR+ZuTrGoZTPA==}
    peerDependencies:
@@ -3362,8 +3404,8 @@ packages:
    resolution: {integrity: sha512-CY3uyFSRbcQv3nnSv8S0+lDftMVz6P963PoRlxrV7ew/Md564g9ut60PYzdLM5qW4jFn93GBF+Soi90ISAN+GQ==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

-  '@ungap/structured-clone@1.3.2':
-    resolution: {integrity: sha512-5jsZFwgR5rTdKwidH9Qmat75RKwqfpKlWWB1frDkljN127mwqBu8K0PYo7/hFpF03IEJpfVPpCQDY/eDx3iHvA==}
+  '@ungap/structured-clone@1.3.3':
+    resolution: {integrity: sha512-60YRaenCQcVjYEKOcG824+DRGGIQ3VKErcBoAEDJZz5bKIs2ZG+X/H9Nk+Q6EVkwJk5QNApxbrc5QtBSwtrXAg==}

  '@use-gesture/core@10.3.1':
    resolution: {integrity: sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw==}
@@ -3373,8 +3415,8 @@ packages:
    peerDependencies:
      react: '>= 16.8.0'

-  '@vector-im/compound-design-tokens@10.2.2':
-    resolution: {integrity: sha512-kncYroDEwyvvk4K4E67ExP4RYp9NEineD1tB38KeJwTmOvcrPtGjWyBAyJgOGeRuc7G5edNLkWnAbvk5yZJ+5w==}
+  '@vector-im/compound-design-tokens@10.2.3':
+    resolution: {integrity: sha512-K2xNkjOzYn2Ya0kUqCy7JIYyx9jbkNIWpex2t9m3FUG4wzkNscvaiRJ/a9Wse1aJmwDDARcHU6mUjtHf5os5MA==}
    peerDependencies:
      '@types/react': '*'
      react: ^17 || ^18 || ^19.0.0
@@ -3384,8 +3426,8 @@ packages:
      react:
        optional: true

-  '@vector-im/compound-web@9.7.0':
-    resolution: {integrity: sha512-X8LS9qtxBVynoQ9vmpqassjrxe8zier3EhFYbhYjb+ygZlls6uGj3m73OW6H/8LaaG2JQhNp99ISq5YvMuBRzg==}
+  '@vector-im/compound-web@9.8.0':
+    resolution: {integrity: sha512-1Xy9eacbp9qD0uhLKb9SoyZ2iM868+M2BOiVX8oGfoZOyJYwihTwWmh2+0K8Kn8pag86t0yqyYplL0NVLY0sUA==}
    peerDependencies:
      '@fontsource/inconsolata': ^5
      '@fontsource/inter': ^5
@@ -3980,8 +4022,8 @@ packages:
    resolution: {integrity: sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==}
    engines: {node: '>= 4'}

-  dompurify@3.4.5:
-    resolution: {integrity: sha512-OrwIBKsdNSVEeubdJ1HBv/wNENRM9ytAVCv7YXt//A3vPdVMNuACRqK9mXCGCBW2ln7BT/A4X0jXHo2Gu89miA==}
+  dompurify@3.4.12:
+    resolution: {integrity: sha512-zQvGet8Z2sWbQhCmfFz/T5QWH2oBmjnqK3qvOjaqaNLrLEF912WamU+ohnTp0TCep/MFVHpdJuCZEdFOdTnEFg==}

  domutils@2.8.0:
    resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==}
@@ -4603,10 +4645,6 @@ packages:
  js-tokens@4.0.0:
    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}

-  js-yaml@4.1.1:
-    resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
-    hasBin: true
-
  js-yaml@4.3.0:
    resolution: {integrity: sha512-1td788aAnnZ5qs7V2QIRl1owjtYpbKt749Y3xauqQgwIIGF/xXWz1wMTEBx5O3LK3lXLVuqXPdPxj2BoFHaW9Q==}
    hasBin: true
@@ -5383,8 +5421,8 @@ packages:
    engines: {node: '>=10.13.0'}
    hasBin: true

-  qs@6.15.1:
-    resolution: {integrity: sha512-6YHEFRL9mfgcAvql/XhwTvf5jKcOiiupt2FiJxHkiX1z4j7WL8J/jRHYLluORvc1XxB5rV20KoeK00gVJamspg==}
+  qs@6.15.3:
+    resolution: {integrity: sha512-O9gl3zCl5h5blw1KGUzQKhA5oUXSl8rwUIM5o0S3nCXMliSvy5Dzx7/DJcI+SwgICv+IneSZwhBh1oSyEHA71A==}
    engines: {node: '>=0.6'}

  query-selector-shadow-dom@1.0.1:
@@ -5694,8 +5732,8 @@ packages:
    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
    engines: {node: '>= 0.4'}

-  side-channel@1.1.0:
-    resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
+  side-channel@1.1.1:
+    resolution: {integrity: sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==}
    engines: {node: '>= 0.4'}

  siginfo@2.0.0:
@@ -5951,8 +5989,8 @@ packages:
  undici-types@7.18.2:
    resolution: {integrity: sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==}

-  undici@6.25.0:
-    resolution: {integrity: sha512-ZgpWDC5gmNiuY9CnLVXEH8rl50xhRCuLNA97fAUnKi8RRuV4E6KG31pDTsLVUKnohJE0I3XDrTeEydAXRw47xg==}
+  undici@6.27.0:
+    resolution: {integrity: sha512-YmfV3YnEDzXRC5lZ2jWtWWHKGUm1zIt8AhesR1tens+HTNv+YZlN/dp6G727LOvMJ8xjP9Be7Y2Sdr96LDm+pg==}
    engines: {node: '>=18.17'}

  unhomoglyph@1.0.6:
@@ -6253,18 +6291,6 @@ packages:
  wrappy@1.0.2:
    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}

-  ws@8.20.0:
-    resolution: {integrity: sha512-sAt8BhgNbzCtgGbt2OxmpuryO63ZoDk/sqaB/znQm94T4fCEsy/yV+7CdC1kJhOU9lboAEU7R3kquuycDoibVA==}
-    engines: {node: '>=10.0.0'}
-    peerDependencies:
-      bufferutil: ^4.0.1
-      utf-8-validate: '>=5.0.2'
-    peerDependenciesMeta:
-      bufferutil:
-        optional: true
-      utf-8-validate:
-        optional: true
-
  ws@8.21.0:
    resolution: {integrity: sha512-Vsp28b7DRcimFQvrqu2Wek3z1iYxDCWqHYB8Qsnk/S4RfaCQzPGPyBNuVjJV3cd6UiKtUtp6sNM77gWvzcCH+g==}
    engines: {node: '>=10.0.0'}
@@ -6349,12 +6375,12 @@ snapshots:
      '@octokit/plugin-rest-endpoint-methods': 10.4.1(@octokit/core@5.2.2)
      '@octokit/request': 8.4.1
      '@octokit/request-error': 5.1.1
-      undici: 6.25.0
+      undici: 6.27.0

  '@actions/http-client@2.2.3':
    dependencies:
      tunnel: 0.0.6
-      undici: 6.25.0
+      undici: 6.27.0

  '@actions/io@1.1.3': {}

@@ -6964,32 +6990,38 @@ snapshots:
    dependencies:
      '@floating-ui/utils': 0.2.11

+  '@floating-ui/core@1.8.0':
+    dependencies:
+      '@floating-ui/utils': 0.2.12
+
  '@floating-ui/dom@1.7.4':
    dependencies:
      '@floating-ui/core': 1.7.5
      '@floating-ui/utils': 0.2.11

-  '@floating-ui/dom@1.7.6':
+  '@floating-ui/dom@1.8.0':
    dependencies:
-      '@floating-ui/core': 1.7.5
-      '@floating-ui/utils': 0.2.11
+      '@floating-ui/core': 1.8.0
+      '@floating-ui/utils': 0.2.12

-  '@floating-ui/react-dom@2.1.8(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+  '@floating-ui/react-dom@2.1.9(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
    dependencies:
-      '@floating-ui/dom': 1.7.6
+      '@floating-ui/dom': 1.8.0
      react: 19.2.7
      react-dom: 19.2.7(react@19.2.7)

-  '@floating-ui/react@0.27.19(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+  '@floating-ui/react@0.27.20(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
    dependencies:
-      '@floating-ui/react-dom': 2.1.8(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
-      '@floating-ui/utils': 0.2.11
+      '@floating-ui/react-dom': 2.1.9(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@floating-ui/utils': 0.2.12
      react: 19.2.7
      react-dom: 19.2.7(react@19.2.7)
      tabbable: 6.5.0

  '@floating-ui/utils@0.2.11': {}

+  '@floating-ui/utils@0.2.12': {}
+
  '@fontsource/inconsolata@5.2.8': {}

  '@fontsource/inter@5.2.8': {}
@@ -7844,6 +7876,8 @@ snapshots:

  '@radix-ui/primitive@1.1.4': {}

+  '@radix-ui/primitive@1.1.5': {}
+
  '@radix-ui/react-arrow@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
    dependencies:
      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
@@ -7865,10 +7899,10 @@ snapshots:
      '@types/react': 19.2.17
      '@types/react-dom': 19.2.3(@types/react@19.2.17)

-  '@radix-ui/react-collection@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+  '@radix-ui/react-collection@1.1.12(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
    dependencies:
      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
-      '@radix-ui/react-context': 1.1.4(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-context': 1.2.0(@types/react@19.2.17)(react@19.2.7)
      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
      '@radix-ui/react-slot': 1.3.0(@types/react@19.2.17)(react@19.2.7)
      react: 19.2.7
@@ -7883,11 +7917,11 @@ snapshots:
    optionalDependencies:
      '@types/react': 19.2.17

-  '@radix-ui/react-context-menu@2.3.2(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+  '@radix-ui/react-context-menu@2.3.3(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
    dependencies:
-      '@radix-ui/primitive': 1.1.4
-      '@radix-ui/react-context': 1.1.4(@types/react@19.2.17)(react@19.2.7)
-      '@radix-ui/react-menu': 2.1.19(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/primitive': 1.1.5
+      '@radix-ui/react-context': 1.2.0(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-menu': 2.1.20(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
      '@radix-ui/react-use-controllable-state': 1.2.3(@types/react@19.2.17)(react@19.2.7)
      react: 19.2.7
@@ -7902,6 +7936,12 @@ snapshots:
    optionalDependencies:
      '@types/react': 19.2.17

+  '@radix-ui/react-context@1.2.0(@types/react@19.2.17)(react@19.2.7)':
+    dependencies:
+      react: 19.2.7
+    optionalDependencies:
+      '@types/react': 19.2.17
+
  '@radix-ui/react-dialog@1.1.17(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
    dependencies:
      '@radix-ui/primitive': 1.1.4
@@ -7943,9 +7983,9 @@ snapshots:
      '@types/react': 19.2.17
      '@types/react-dom': 19.2.3(@types/react@19.2.17)

-  '@radix-ui/react-dismissable-layer@1.1.14(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+  '@radix-ui/react-dismissable-layer@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
    dependencies:
-      '@radix-ui/primitive': 1.1.4
+      '@radix-ui/primitive': 1.1.5
      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
      '@radix-ui/react-use-callback-ref': 1.1.2(@types/react@19.2.17)(react@19.2.7)
@@ -7956,13 +7996,13 @@ snapshots:
      '@types/react': 19.2.17
      '@types/react-dom': 19.2.3(@types/react@19.2.17)

-  '@radix-ui/react-dropdown-menu@2.1.19(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+  '@radix-ui/react-dropdown-menu@2.1.20(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
    dependencies:
-      '@radix-ui/primitive': 1.1.4
+      '@radix-ui/primitive': 1.1.5
      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
-      '@radix-ui/react-context': 1.1.4(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-context': 1.2.0(@types/react@19.2.17)(react@19.2.7)
      '@radix-ui/react-id': 1.1.2(@types/react@19.2.17)(react@19.2.7)
-      '@radix-ui/react-menu': 2.1.19(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-menu': 2.1.20(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
      '@radix-ui/react-use-controllable-state': 1.2.3(@types/react@19.2.17)(react@19.2.7)
      react: 19.2.7
@@ -7988,7 +8028,7 @@ snapshots:
      '@types/react': 19.2.17
      '@types/react-dom': 19.2.3(@types/react@19.2.17)

-  '@radix-ui/react-focus-scope@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+  '@radix-ui/react-focus-scope@1.1.12(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
    dependencies:
      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
@@ -7999,11 +8039,11 @@ snapshots:
      '@types/react': 19.2.17
      '@types/react-dom': 19.2.3(@types/react@19.2.17)

-  '@radix-ui/react-form@0.1.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+  '@radix-ui/react-form@0.1.12(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
    dependencies:
-      '@radix-ui/primitive': 1.1.4
+      '@radix-ui/primitive': 1.1.5
      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
-      '@radix-ui/react-context': 1.1.4(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-context': 1.2.0(@types/react@19.2.17)(react@19.2.7)
      '@radix-ui/react-id': 1.1.2(@types/react@19.2.17)(react@19.2.7)
      '@radix-ui/react-label': 2.1.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
@@ -8029,22 +8069,22 @@ snapshots:
      '@types/react': 19.2.17
      '@types/react-dom': 19.2.3(@types/react@19.2.17)

-  '@radix-ui/react-menu@2.1.19(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+  '@radix-ui/react-menu@2.1.20(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
    dependencies:
-      '@radix-ui/primitive': 1.1.4
-      '@radix-ui/react-collection': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/primitive': 1.1.5
+      '@radix-ui/react-collection': 1.1.12(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
-      '@radix-ui/react-context': 1.1.4(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-context': 1.2.0(@types/react@19.2.17)(react@19.2.7)
      '@radix-ui/react-direction': 1.1.2(@types/react@19.2.17)(react@19.2.7)
-      '@radix-ui/react-dismissable-layer': 1.1.14(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-dismissable-layer': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
      '@radix-ui/react-focus-guards': 1.1.4(@types/react@19.2.17)(react@19.2.7)
-      '@radix-ui/react-focus-scope': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-focus-scope': 1.1.12(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
      '@radix-ui/react-id': 1.1.2(@types/react@19.2.17)(react@19.2.7)
-      '@radix-ui/react-popper': 1.3.2(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-popper': 1.3.3(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
      '@radix-ui/react-portal': 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
-      '@radix-ui/react-presence': 1.1.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-presence': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
-      '@radix-ui/react-roving-focus': 1.1.14(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-roving-focus': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
      '@radix-ui/react-slot': 1.3.0(@types/react@19.2.17)(react@19.2.7)
      '@radix-ui/react-use-callback-ref': 1.1.2(@types/react@19.2.17)(react@19.2.7)
      aria-hidden: 1.2.6
@@ -8055,12 +8095,12 @@ snapshots:
      '@types/react': 19.2.17
      '@types/react-dom': 19.2.3(@types/react@19.2.17)

-  '@radix-ui/react-popper@1.3.2(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+  '@radix-ui/react-popper@1.3.3(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
    dependencies:
-      '@floating-ui/react-dom': 2.1.8(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@floating-ui/react-dom': 2.1.9(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
      '@radix-ui/react-arrow': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
-      '@radix-ui/react-context': 1.1.4(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-context': 1.2.0(@types/react@19.2.17)(react@19.2.7)
      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
      '@radix-ui/react-use-callback-ref': 1.1.2(@types/react@19.2.17)(react@19.2.7)
      '@radix-ui/react-use-layout-effect': 1.1.2(@types/react@19.2.17)(react@19.2.7)
@@ -8102,6 +8142,15 @@ snapshots:
      '@types/react': 19.2.17
      '@types/react-dom': 19.2.3(@types/react@19.2.17)

+  '@radix-ui/react-presence@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.2(@types/react@19.2.17)(react@19.2.7)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+
  '@radix-ui/react-primitive@2.1.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
    dependencies:
      '@radix-ui/react-slot': 1.3.0(@types/react@19.2.17)(react@19.2.7)
@@ -8120,9 +8169,9 @@ snapshots:
      '@types/react': 19.2.17
      '@types/react-dom': 19.2.3(@types/react@19.2.17)

-  '@radix-ui/react-progress@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+  '@radix-ui/react-progress@1.1.12(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
    dependencies:
-      '@radix-ui/react-context': 1.1.4(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-context': 1.2.0(@types/react@19.2.17)(react@19.2.7)
      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
      react: 19.2.7
      react-dom: 19.2.7(react@19.2.7)
@@ -8130,17 +8179,19 @@ snapshots:
      '@types/react': 19.2.17
      '@types/react-dom': 19.2.3(@types/react@19.2.17)

-  '@radix-ui/react-roving-focus@1.1.14(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+  '@radix-ui/react-roving-focus@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
    dependencies:
-      '@radix-ui/primitive': 1.1.4
-      '@radix-ui/react-collection': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/primitive': 1.1.5
+      '@radix-ui/react-collection': 1.1.12(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
      '@radix-ui/react-compose-refs': 1.1.3(@types/react@19.2.17)(react@19.2.7)
-      '@radix-ui/react-context': 1.1.4(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-context': 1.2.0(@types/react@19.2.17)(react@19.2.7)
      '@radix-ui/react-direction': 1.1.2(@types/react@19.2.17)(react@19.2.7)
      '@radix-ui/react-id': 1.1.2(@types/react@19.2.17)(react@19.2.7)
      '@radix-ui/react-primitive': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
      '@radix-ui/react-use-callback-ref': 1.1.2(@types/react@19.2.17)(react@19.2.7)
      '@radix-ui/react-use-controllable-state': 1.2.3(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-use-is-hydrated': 0.1.1(@types/react@19.2.17)(react@19.2.7)
+      '@radix-ui/react-use-layout-effect': 1.1.2(@types/react@19.2.17)(react@19.2.7)
      react: 19.2.7
      react-dom: 19.2.7(react@19.2.7)
    optionalDependencies:
@@ -8210,6 +8261,12 @@ snapshots:
    optionalDependencies:
      '@types/react': 19.2.17

+  '@radix-ui/react-use-is-hydrated@0.1.1(@types/react@19.2.17)(react@19.2.7)':
+    dependencies:
+      react: 19.2.7
+    optionalDependencies:
+      '@types/react': 19.2.17
+
  '@radix-ui/react-use-layout-effect@1.1.2(@types/react@19.2.17)(react@19.2.7)':
    dependencies:
      react: 19.2.7
@@ -8974,7 +9031,7 @@ snapshots:
      '@typescript-eslint/types': 8.62.0
      eslint-visitor-keys: 5.0.1

-  '@ungap/structured-clone@1.3.2': {}
+  '@ungap/structured-clone@1.3.3': {}

  '@use-gesture/core@10.3.1': {}

@@ -8983,23 +9040,24 @@ snapshots:
      '@use-gesture/core': 10.3.1
      react: 19.2.7

-  '@vector-im/compound-design-tokens@10.2.2(@types/react@19.2.17)(react@19.2.7)':
+  '@vector-im/compound-design-tokens@10.2.3(@types/react@19.2.17)(react@19.2.7)':
    optionalDependencies:
      '@types/react': 19.2.17
      react: 19.2.7

-  '@vector-im/compound-web@9.7.0(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(@vector-im/compound-design-tokens@10.2.2(@types/react@19.2.17)(react@19.2.7))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+  '@vector-im/compound-web@9.8.0(@fontsource/inconsolata@5.2.8)(@fontsource/inter@5.2.8)(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(@vector-im/compound-design-tokens@10.2.3(@types/react@19.2.17)(react@19.2.7))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
    dependencies:
-      '@floating-ui/react': 0.27.19(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@floating-ui/react': 0.27.20(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@floating-ui/react-dom': 2.1.9(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
      '@fontsource/inconsolata': 5.2.8
      '@fontsource/inter': 5.2.8
-      '@radix-ui/react-context-menu': 2.3.2(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
-      '@radix-ui/react-dropdown-menu': 2.1.19(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
-      '@radix-ui/react-form': 0.1.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
-      '@radix-ui/react-progress': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-context-menu': 2.3.3(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-dropdown-menu': 2.1.20(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-form': 0.1.12(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@radix-ui/react-progress': 1.1.12(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
      '@radix-ui/react-separator': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
      '@radix-ui/react-slot': 1.3.0(@types/react@19.2.17)(react@19.2.7)
-      '@vector-im/compound-design-tokens': 10.2.2(@types/react@19.2.17)(react@19.2.7)
+      '@vector-im/compound-design-tokens': 10.2.3(@types/react@19.2.17)(react@19.2.7)
      classnames: 2.5.1
      react: 19.2.7
      vaul: 1.1.2(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
@@ -9470,7 +9528,7 @@ snapshots:
  cosmiconfig@8.3.6(typescript@5.9.3):
    dependencies:
      import-fresh: 3.3.1
-      js-yaml: 4.1.1
+      js-yaml: 4.3.0
      parse-json: 5.2.0
      path-type: 4.0.0
    optionalDependencies:
@@ -9641,7 +9699,7 @@ snapshots:
    dependencies:
      domelementtype: 2.3.0

-  dompurify@3.4.5:
+  dompurify@3.4.12:
    optionalDependencies:
      '@types/trusted-types': 2.0.7

@@ -9770,7 +9828,7 @@ snapshots:
      '@humanwhocodes/config-array': 0.13.0
      '@humanwhocodes/module-importer': 1.0.1
      '@nodelib/fs.walk': 1.2.8
-      '@ungap/structured-clone': 1.3.2
+      '@ungap/structured-clone': 1.3.3
      ajv: 6.15.0
      chalk: 4.1.2
      cross-spawn: 7.0.6
@@ -10322,10 +10380,6 @@ snapshots:

  js-tokens@4.0.0: {}

-  js-yaml@4.1.1:
-    dependencies:
-      argparse: 2.0.1
-
  js-yaml@4.3.0:
    dependencies:
      argparse: 2.0.1
@@ -10350,7 +10404,7 @@ snapshots:
      whatwg-encoding: 3.1.1
      whatwg-mimetype: 4.0.0
      whatwg-url: 14.2.0
-      ws: 8.20.0
+      ws: 8.21.0
      xml-name-validator: 5.0.0
    transitivePeerDependencies:
      - bufferutil
@@ -11227,7 +11281,7 @@ snapshots:
      '@posthog/core': 1.29.3
      '@posthog/types': 1.374.0
      core-js: 3.49.0
-      dompurify: 3.4.5
+      dompurify: 3.4.12
      fflate: 0.4.8
      preact: 10.29.1
      query-selector-shadow-dom: 1.0.1
@@ -11292,9 +11346,10 @@ snapshots:
      pngjs: 5.0.0
      yargs: 15.4.1

-  qs@6.15.1:
+  qs@6.15.3:
    dependencies:
-      side-channel: 1.1.0
+      es-define-property: 1.0.1
+      side-channel: 1.1.1

  query-selector-shadow-dom@1.0.1: {}

@@ -11630,7 +11685,7 @@ snapshots:
      object-inspect: 1.13.4
      side-channel-map: 1.0.1

-  side-channel@1.1.0:
+  side-channel@1.1.1:
    dependencies:
      es-errors: 1.3.0
      object-inspect: 1.13.4
@@ -11869,7 +11924,7 @@ snapshots:

  undici-types@7.18.2: {}

-  undici@6.25.0: {}
+  undici@6.27.0: {}

  unhomoglyph@1.0.6: {}

@@ -11913,7 +11968,7 @@ snapshots:
  url@0.11.4:
    dependencies:
      punycode: 1.4.1
-      qs: 6.15.1
+      qs: 6.15.3

  use-callback-ref@1.3.3(@types/react@19.2.17)(react@19.2.7):
    dependencies:
@@ -11963,7 +12018,7 @@ snapshots:
  vite-plugin-generate-file@0.3.1:
    dependencies:
      ejs: 3.1.10
-      js-yaml: 4.1.1
+      js-yaml: 4.3.0
      mime-types: 2.1.35
      picocolors: 1.1.1

@@ -12155,8 +12210,6 @@ snapshots:

  wrappy@1.0.2: {}

-  ws@8.20.0: {}
-
  ws@8.21.0: {}

  wsl-utils@0.1.0:
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,3 +1,8 @@
+minimumReleaseAgeExclude:
+  - "@vector-im/compound-design-tokens"
+  - "@vector-im/compound-web"
+  - matrix-js-sdk
+  - matrix-widget-api
 allowBuilds:
  "@parcel/watcher": true
  "@sentry/cli": true
@@ -24,12 +29,30 @@ overrides:
  # Security fixes:
  # - https://github.com/element-hq/element-call/security/dependabot/110
  # - https://github.com/element-hq/element-call/security/dependabot/122
-  "qs": "^6.14.1"
-  # Security fix: https://github.com/element-hq/element-call/security/dependabot/106
-  "js-yaml": "^4.1.1"
+  # - https://github.com/element-hq/element-call/security/dependabot/179
+  "qs": "^6.15.2"
+  # Security fixes:
+  # - https://github.com/element-hq/element-call/security/dependabot/106
+  # - https://github.com/element-hq/element-call/security/dependabot/203
+  "js-yaml": "^4.2.0"
  # Storybook declares support for 0.27.0 only but empirically works fine with 0.28.0.
  "esbuild": "^0.28.0"
-  # Multiple security fixes: https://github.com/nodejs/undici/releases/tag/v6.24.0
-  "undici": "^6.24.0"
+  # Security fixes:
+  # - https://github.com/nodejs/undici/releases/tag/v6.24.0
+  # - https://github.com/element-hq/element-call/security/dependabot/201
+  # - https://github.com/element-hq/element-call/security/dependabot/199
+  "undici": "^6.27.0"
  # Security fix: https://github.com/advisories/GHSA-rf6f-7fwh-wjgh
  "flatted": "^3.4.2"
+  # Security fix: https://github.com/element-hq/element-call/security/dependabot/184
+  "ws": "^8.21.0"
+  # Security fixes:
+  # - https://github.com/element-hq/element-call/security/dependabot/191
+  # - https://github.com/element-hq/element-call/security/dependabot/190
+  # - https://github.com/element-hq/element-call/security/dependabot/192
+  # - https://github.com/element-hq/element-call/security/dependabot/194
+  # - https://github.com/element-hq/element-call/security/dependabot/198
+  # - https://github.com/element-hq/element-call/security/dependabot/196
+  # - https://github.com/element-hq/element-call/security/dependabot/195
+  # - https://github.com/element-hq/element-call/security/dependabot/193
+  "dompurify": "^3.4.11"
--- a/renovate.json
+++ b/renovate.json
@@ -61,6 +61,15 @@
    {
      "groupName": "Pnpm",
      "matchDepNames": ["pnpm"]
+    },
+    {
+      "description": "Update the element-web image digest daily, in its own PR",
+      "groupName": "Element Web",
+      "matchPackageNames": ["ghcr.io/element-hq/element-web"],
+      "matchUpdateTypes": ["digest"],
+      "schedule": ["* 0-3 * * *"],
+      "minimumReleaseAge": null,
+      "automerge": true
    }
  ],
  "semanticCommits": "disabled",
--- a/src/button/Button.module.css
+++ b/src/button/Button.module.css
@@ -5,10 +5,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */

-.endCall > svg {
-  color: var(--stopgap-color-on-solid-accent);
-}
-
 .rotate > svg {
  animation: spin 1s linear infinite;
 }
--- a/src/button/Button.tsx
+++ b/src/button/Button.tsx
@@ -135,21 +135,12 @@ interface EndCallButtonProps extends ComponentPropsWithoutRef<"button"> {
  size?: "md" | "lg";
 }

-export const EndCallButton: FC<EndCallButtonProps> = ({
-  className,
-  ...props
-}) => {
+export const EndCallButton: FC<EndCallButtonProps> = (props) => {
  const { t } = useTranslation();

  return (
    <Tooltip label={t("hangup_button_label")}>
-      <CpdButton
-        className={classNames(className, styles.endCall)}
-        iconOnly
-        Icon={EndCallIcon}
-        destructive
-        {...props}
-      />
+      <CpdButton iconOnly Icon={EndCallIcon} destructive {...props} />
    </Tooltip>
  );
 };
--- a/src/components/CallFooter.stories.tsx
+++ b/src/components/CallFooter.stories.tsx
@@ -16,10 +16,12 @@ import inCallViewStyles from "../room/InCallView.module.css";
 import { useStaticViewModel } from "../state/ViewModel";
 import { ReactionsSenderContext } from "../reactions/useReactionsSender";
 import { type ReactionOption } from "../reactions";
-import { type GridMode } from "../state/CallViewModel/CallViewModel";
 import { MediaDevicesContext } from "../MediaDevicesContext";
 import { MediaDevices } from "../state/MediaDevices";
 import { globalScope } from "../state/ObservableScope";
+import { constant } from "../state/Behavior";
+import { type LayoutMode } from "../state/LayoutSwitchViewModel";
+
 // consts for tests
 const reactionIdentifier = "@user:example.com:DEVICE";
 const reactionData = {
@@ -32,6 +34,7 @@ const mediaDevices = new MediaDevices(globalScope);
 /**
 * A wrapper component that is used for:
 *  - exposing the snapshot via props so the storybook documents the snapshot properties (basically unpack them form the vm)
+ *  - constructing the layout switch view model
 *  - Add additional react context
 * The paraeters are all params from the FooterSnapshot,
 * the Snapshot of the vm, the wrapper will create a mocked vm from it and pass it to the CallFooter.
@@ -40,11 +43,18 @@ const mediaDevices = new MediaDevices(globalScope);
 */
 function CallFooterStoryWrapper({
  children,
+  layout,
+  setLayout,
  ...vmSnapshot
-}: FooterSnapshot & {
+}: Omit<FooterSnapshot, "layoutSwitchVm"> & {
  children?: false | JSX.Element | JSX.Element[] | undefined;
+  layout: LayoutMode | null;
+  setLayout: (value: LayoutMode) => void;
 }): ReactNode {
-  const vm = useStaticViewModel(vmSnapshot);
+  const vm = useStaticViewModel({
+    ...vmSnapshot,
+    layoutSwitchVm: layout && { layout$: constant(layout), setLayout },
+  });
  return (
    <MediaDevicesContext value={mediaDevices}>
      <div className={inCallViewStyles.inRoom}>
@@ -62,28 +72,50 @@ function CallFooterStoryWrapper({
  );
 }

-const meta = {
-  component: CallFooterStoryWrapper,
-} satisfies Meta<typeof CallFooterStoryWrapper>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
 const fnArgType = {
  control: { type: "select" as const },
  options: ["MockedCallback", "undefined"],
  mapping: { MockedCallback: fn(), undefined: undefined },
 };

+const meta = {
+  component: CallFooterStoryWrapper,
+  argTypes: {
+    layout: {
+      control: "radio",
+      options: ["grid", "spotlight"] satisfies LayoutMode[],
+    },
+    audioOutputSwitcher: {
+      control: "select",
+      options: ["NoOutputCallback", "speaker", "earpiece"],
+      table: { defaultValue: { summary: "NoOutputCallback" } },
+      mapping: {
+        NoOutputCallback: undefined,
+        // This is inverersed (speaker<->earpice) because the switcher object stores the target output, not the current one.
+        speaker: { targetOutput: "earpiece", switch: fn() },
+        earpiece: { targetOutput: "speaker", switch: fn() },
+      },
+    },
+    toggleScreenSharing: fnArgType,
+    openSettings: fnArgType,
+    toggleAudio: fnArgType,
+    toggleVideo: fnArgType,
+    hangup: fnArgType,
+  },
+} satisfies Meta<typeof CallFooterStoryWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
 export const Default: Story = {
  args: {
    showLogo: false,
-    layoutMode: "grid",
+    layout: "grid",
+    setLayout: fn(),
    audioEnabled: true,
    audioBusy: false,
    videoEnabled: true,
    videoBusy: false,
-    setLayoutMode: fn(),
    openSettings: fn(),
    toggleAudio: fn(),
    toggleVideo: fn(),
@@ -111,29 +143,6 @@ export const Default: Story = {
  parameters: {
    layout: "fullscreen",
  },
-  argTypes: {
-    layoutMode: {
-      control: "radio",
-      options: ["grid", "spotlight"] satisfies GridMode[],
-    },
-    audioOutputSwitcher: {
-      control: "select",
-      options: ["NoOutputCallback", "speaker", "earpiece"],
-      table: { defaultValue: { summary: "NoOutputCallback" } },
-      mapping: {
-        NoOutputCallback: undefined,
-        // This is inverersed (speaker<->earpice) because the switcher object stores the target output, not the current one.
-        speaker: { targetOutput: "earpiece", switch: fn() },
-        earpiece: { targetOutput: "speaker", switch: fn() },
-      },
-    },
-    toggleScreenSharing: fnArgType,
-    setLayoutMode: fnArgType,
-    openSettings: fnArgType,
-    toggleAudio: fnArgType,
-    toggleVideo: fnArgType,
-    hangup: fnArgType,
-  },
 };

 export const WithAudioAndVideoOptions: Story = {
@@ -194,7 +203,7 @@ export const AudioVideoEnabled: Story = {

    const spotlightRadio = canvas.getByRole("radio", { name: "Spotlight" });
    await userEvent.click(spotlightRadio);
-    await expect(args.setLayoutMode).toHaveBeenCalledWith("spotlight");
+    await expect(args.setLayout).toHaveBeenCalledWith("spotlight");

    const micButtonMute = canvas.getByRole("switch", {
      name: "Mute microphone",
@@ -225,14 +234,14 @@ export const SpotlightMode: Story = {
  ...Default,
  args: {
    ...Default.args,
-    layoutMode: "spotlight",
+    layout: "spotlight",
  },
  play: async ({ args, canvasElement }) => {
    const canvas = within(canvasElement);

    const spotlightRadio = canvas.getByRole("radio", { name: "Grid" });
    await userEvent.click(spotlightRadio);
-    await expect(args.setLayoutMode).toHaveBeenCalledWith("grid");
+    await expect(args.setLayout).toHaveBeenCalledWith("grid");
  },
 };

@@ -264,7 +273,7 @@ export const Pip: Story = {
  args: {
    ...Default.args,
    buttonSize: "md",
-    layoutMode: undefined,
+    layout: null,
  },
  play: async ({ args, canvasElement }) => {
    const canvas = within(canvasElement);
@@ -348,7 +357,7 @@ export const Lobby: Story = {
    ...Default.args,
    showLogo: false,
    openSettings: undefined,
-    setLayoutMode: undefined,
+    layout: null,
    toggleScreenSharing: undefined,
  },
  parameters: {
@@ -362,7 +371,7 @@ export const LobbyMobile: Story = {
    ...Default.args,
    showLogo: false,

-    setLayoutMode: undefined,
+    layout: null,
    toggleScreenSharing: undefined,
  },
  globals: {
@@ -379,7 +388,7 @@ export const LobbyRecentButton: Story = {
    ...Default.args,
    children: <Link>Back To Recents</Link>,
    showLogo: false,
-    setLayoutMode: undefined,
+    layout: null,
    toggleScreenSharing: undefined,
  },
  parameters: {
@@ -393,7 +402,7 @@ export const LobbyRecentButtonMobile: Story = {
    ...Default.args,
    children: <Link>Back To Recents</Link>,
    showLogo: false,
-    setLayoutMode: undefined,
+    layout: null,
    toggleScreenSharing: undefined,
  },
  globals: {
--- a/src/components/CallFooter.tsx
+++ b/src/components/CallFooter.tsx
@@ -7,12 +7,6 @@ Please see LICENSE in the repository root for full details.

 import { type FC, type JSX, type Ref, useMemo } from "react";
 import classNames from "classnames";
-import {
-  SpotlightIcon,
-  GridIcon,
-} from "@vector-im/compound-design-tokens/assets/web/icons";
-import { Switch } from "@vector-im/compound-web";
-import { t } from "i18next";

 import LogoMark from "../icons/LogoMark.svg?react";
 import LogoType from "../icons/LogoType.svg?react";
@@ -28,13 +22,14 @@ import {
  type ReactionData,
 } from "../button";
 import styles from "./CallFooter.module.css";
-import { type GridMode } from "../state/CallViewModel/CallViewModel";
 import {
  MediaMuteAndSwitchButton,
  type MenuOptions,
 } from "./MediaMuteAndSwitchButton";
 import { type ViewModel } from "../state/ViewModel";
 import { useBehavior } from "../useBehavior";
+import { type LayoutSwitchViewModel } from "../state/LayoutSwitchViewModel";
+import { LayoutSwitch } from "../room/LayoutSwitch";

 export interface AudioOutputSwitcher {
  targetOutput: string;
@@ -61,8 +56,6 @@ export interface FooterActions {
  /** Also controls if the videoMute button is disabled */
  toggleVideo: (() => void) | undefined;
  toggleBlur: (() => void) | undefined;
-  /** Also controls if the layout button is visible */
-  setLayoutMode: ((mode: GridMode) => void) | undefined;
  toggleScreenSharing: (() => void) | undefined;
  /** Also controls if the settings button is visible */
  openSettings: (() => void) | undefined;
@@ -87,7 +80,8 @@ export interface FooterState {
  buttonSize: "md" | "lg";
  showLogo: boolean;

-  layoutMode: GridMode | undefined;
+  /** Also controls if the layout switch is visible */
+  layoutSwitchVm: LayoutSwitchViewModel | null;

  sharingScreen: boolean;

@@ -126,8 +120,7 @@ export const CallFooter: FC<FooterProps> = ({
  const asOverlay = useBehavior(vm.asOverlay$);
  const showFooter = useBehavior(vm.showFooter$);
  const hideControls = useBehavior(vm.hideControls$);
-  const layoutMode = useBehavior(vm.layoutMode$);
-  const setLayoutMode = useBehavior(vm.setLayoutMode$);
+  const layoutSwitchVm = useBehavior(vm.layoutSwitchVm$);
  const openSettings = useBehavior(vm.openSettings$);
  const audioEnabled = useBehavior(vm.audioEnabled$);
  const audioBusy = useBehavior(vm.audioBusy$);
@@ -317,20 +310,8 @@ export const CallFooter: FC<FooterProps> = ({
        {(showLogo || debugTileLayout) && logoDebugContainer}
      </div>
      {!hideControls && <div className={styles.buttons}>{buttons}</div>}
-      {!hideControls && setLayoutMode && layoutMode && (
-        <Switch<"spotlight", "grid">
-          name="layoutMode"
-          aria-label={t("layout_switch_label")}
-          leftLabel={t("layout_spotlight_label")}
-          leftValue="spotlight"
-          leftIcon={SpotlightIcon}
-          rightLabel={t("layout_grid_label")}
-          rightValue="grid"
-          rightIcon={GridIcon}
-          className={styles.layout}
-          value={layoutMode}
-          onChange={setLayoutMode}
-        />
+      {!hideControls && layoutSwitchVm && (
+        <LayoutSwitch vm={layoutSwitchVm} className={styles.layout} />
      )}
    </div>
  );
--- a/src/components/CallFooterViewModel.tsx
+++ b/src/components/CallFooterViewModel.tsx
@@ -182,14 +182,7 @@ export function createCallFooterViewModel(

    showLogo$: scope.behavior(isPip$.pipe(map((isPip) => showLogo && !isPip))),

-    layoutMode$: callModel.gridMode$,
-    setLayoutMode$: scope.behavior(
-      isPip$.pipe(
-        map((isPip) =>
-          !isPip && showControls ? callModel.setGridMode : undefined,
-        ),
-      ),
-    ),
+    layoutSwitchVm$: callModel.layoutSwitchVm$,

    sharingScreen$: callModel.sharingScreen$,
    toggleScreenSharing$: constant(callModel.toggleScreenSharing ?? undefined),
@@ -247,20 +240,18 @@ export function createLobbyFooterViewModel(
      hideControls: false,
      asOverlay: false,
      buttonSize: "lg",
-      showLayoutSwitcher: false,
      openSettings,
      hangup,
      debugTileLayout: false,
      showFooter: true,
      toggleAudio: undefined,
      toggleVideo: undefined,
-      setLayoutMode: undefined,
      toggleScreenSharing: undefined,
      audioEnabled: undefined,
      audioBusy: false,
      videoEnabled: undefined,
      videoBusy: false,
-      layoutMode: undefined,
+      layoutSwitchVm: null,
      sharingScreen: false,
      audioOutputSwitcher: undefined,
      reactionIdentifier: undefined,
--- a/src/graphics/video-placeholder.gif
+++ b/src/graphics/video-placeholder.gif
--- a/src/grid/OneOnOneLandscapeLayout.module.css
+++ b/src/grid/OneOnOneLandscapeLayout.module.css
--- a/src/grid/OneOnOneLandscapeLayout.tsx
+++ b/src/grid/OneOnOneLandscapeLayout.tsx
@@ -10,28 +10,28 @@ import { type ReactNode, useCallback, useMemo } from "react";
 import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";

-import { type OneOnOneLandscapeLayout as OneOnOneLandscapeLayoutModel } from "../state/layout-types.ts";
+import { type OneOnOneDesktopLayout as OneOnOneDesktopLayoutModel } from "../state/layout-types.ts";
 import { type CallLayout, arrangeTiles } from "./CallLayout";
-import styles from "./OneOnOneLandscapeLayout.module.css";
+import styles from "./OneOnOneDesktopLayout.module.css";
 import { type DragCallback, useUpdateLayout } from "./Grid";
 import { useBehavior } from "../useBehavior";

 /**
- * An implementation of the "one-on-one" layout for landscape screens, in which
+ * An implementation of the "one-on-one" layout for desktop platforms, in which
 * the remote participant is shown at maximum size, overlaid by a small view of
 * the local participant.
 */
-export const makeOneOnOneLandscapeLayout: CallLayout<
-  OneOnOneLandscapeLayoutModel
+export const makeOneOnOneDesktopLayout: CallLayout<
+  OneOnOneDesktopLayoutModel
 > = ({ minBounds$ }) => ({
  foreground: "fixed",

-  fixed: function OneOnOneLandscapeLayoutFixed({ ref }): ReactNode {
+  fixed: function OneOnOneDesktopLayoutFixed({ ref }): ReactNode {
    useUpdateLayout();
    return <div ref={ref} />;
  },

-  scrolling: function OneOnOneLandscapeLayoutScrolling({
+  scrolling: function OneOnOneDesktopLayoutScrolling({
    ref,
    model,
    Slot,
--- a/src/grid/OneOnOnePortraitLayout.module.css
+++ b/src/grid/OneOnOnePortraitLayout.module.css
@@ -19,14 +19,28 @@ Please see LICENSE in the repository root for full details.
  inset: var(--cpd-space-4x);
 }

+/* Give the PiP a landscape aspect ratio */
 .pip[data-size="sm"] {
-  inline-size: 88px;
-  block-size: 132px;
+  inline-size: 132px;
+  block-size: 88px;
 }

 .pip[data-size="lg"] {
-  inline-size: 140px;
-  block-size: 210px;
+  inline-size: 210px;
+  block-size: 140px;
+}
+
+@media (max-width: 600px) {
+  /* Give the PiP a portrait aspect ratio */
+  .pip[data-size="sm"] {
+    inline-size: 88px;
+    block-size: 132px;
+  }
+
+  .pip[data-size="lg"] {
+    inline-size: 140px;
+    block-size: 210px;
+  }
 }

 .pip[data-block-alignment="start"] {
--- a/src/grid/OneOnOnePortraitLayout.tsx
+++ b/src/grid/OneOnOnePortraitLayout.tsx
@@ -9,23 +9,23 @@ Please see LICENSE in the repository root for full details.
 import { type ReactNode, useCallback } from "react";
 import classNames from "classnames";

-import { type OneOnOnePortraitLayout as OneOnOnePortraitLayoutModel } from "../state/layout-types.ts";
+import { type OneOnOneMobileLayout as OneOnOneMobileLayoutModel } from "../state/layout-types.ts";
 import { type CallLayout } from "./CallLayout";
-import styles from "./OneOnOnePortraitLayout.module.css";
+import styles from "./OneOnOneMobileLayout.module.css";
 import { type DragCallback, useUpdateLayout } from "./Grid";
 import { useBehavior } from "../useBehavior";

 /**
- * An implementation of the "one-on-one" layout for portrait screens, in which
+ * An implementation of the "one-on-one" layout for mobile platforms, in which
 * the remote participant is shown at maximum size, overlaid by a small view of
 * the local participant.
 */
-export const makeOneOnOnePortraitLayout: CallLayout<
-  OneOnOnePortraitLayoutModel
+export const makeOneOnOneMobileLayout: CallLayout<
+  OneOnOneMobileLayoutModel
 > = () => ({
  foreground: "scrolling",

-  fixed: function OneOnOnePortraitLayoutFixed({ ref, model, Slot }): ReactNode {
+  fixed: function OneOnOneMobileLayoutFixed({ ref, model, Slot }): ReactNode {
    useUpdateLayout();
    return (
      <div ref={ref} className={styles.layer}>
@@ -38,7 +38,7 @@ export const makeOneOnOnePortraitLayout: CallLayout<
    );
  },

-  scrolling: function OneOnOnePortraitLayoutScrolling({
+  scrolling: function OneOnOneMobileLayoutScrolling({
    ref,
    model,
    Slot,
--- a/src/index.css
+++ b/src/index.css
@@ -28,12 +28,6 @@ layer(compound);
  --font-size-title: calc(24px * var(--font-scale));
  --font-size-headline: calc(32px * var(--font-scale));

-  /* These colors are needed during the transitionary period between the old and
-  new Compound design systems, but should be removed ASAP */
-  --stopgap-color-on-solid-accent: var(--cpd-color-bg-canvas-default);
-  --stopgap-background-85: rgba(255, 255, 255, 0.85);
-  --stopgap-bgColor3: #444;
-
  --cpd-color-border-accent: var(--cpd-color-green-800);
  /* The distance to inset non-full-width content from the edge of the window
  along the inline axis. This ramps up from 16px for typical mobile windows, to
--- a/src/input/Input.module.css
+++ b/src/input/Input.module.css
@@ -173,14 +173,6 @@ Please see LICENSE in the repository root for full details.
  border-color: var(--cpd-color-border-disabled);
 }

-.checkbox svg {
-  display: none;
-}
-
-.checkbox svg * {
-  stroke: var(--stopgap-color-on-solid-accent);
-}
-
 .checkboxField input[type="checkbox"]:checked + label > .checkbox {
  background: var(--cpd-color-text-action-accent);
  border-color: var(--cpd-color-text-action-accent);
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -49,8 +49,8 @@ import { type EncryptionSystem } from "../e2ee/sharedKeyManagement";
 import { E2eeType } from "../e2ee/e2eeType";
 import { makeGridLayout } from "../grid/GridLayout";
 import { type CallLayoutOutputs } from "../grid/CallLayout";
-import { makeOneOnOneLandscapeLayout } from "../grid/OneOnOneLandscapeLayout";
-import { makeOneOnOnePortraitLayout } from "../grid/OneOnOnePortraitLayout";
+import { makeOneOnOneDesktopLayout } from "../grid/OneOnOneDesktopLayout";
+import { makeOneOnOneMobileLayout } from "../grid/OneOnOneMobileLayout";
 import { makeSpotlightExpandedLayout } from "../grid/SpotlightExpandedLayout";
 import { makeSpotlightLandscapeLayout } from "../grid/SpotlightLandscapeLayout";
 import { makeSpotlightPortraitLayout } from "../grid/SpotlightPortraitLayout";
@@ -483,8 +483,8 @@ export const InCallView: FC<InCallViewProps> = ({
      "spotlight-landscape": makeSpotlightLandscapeLayout(inputs),
      "spotlight-portrait": makeSpotlightPortraitLayout(inputs),
      "spotlight-expanded": makeSpotlightExpandedLayout(inputs),
-      "one-on-one-landscape": makeOneOnOneLandscapeLayout(inputs),
-      "one-on-one-portrait": makeOneOnOnePortraitLayout(inputs),
+      "one-on-one-desktop": makeOneOnOneDesktopLayout(inputs),
+      "one-on-one-mobile": makeOneOnOneMobileLayout(inputs),
    };
  }, [gridBoundsObservable$]);

--- a/src/room/LayoutSwitch.tsx
+++ b/src/room/LayoutSwitch.tsx
@@ -0,0 +1,44 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { useId, type FC } from "react";
+import {
+  SpotlightViewIcon,
+  GridIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
+
+import { type LayoutSwitchViewModel } from "../state/LayoutSwitchViewModel";
+import { useBehavior } from "../useBehavior";
+import { useTranslation } from "react-i18next";
+import { Switch } from "@vector-im/compound-web";
+
+interface Props {
+  vm: LayoutSwitchViewModel;
+  className?: string;
+}
+
+export const LayoutSwitch: FC<Props> = ({ vm, className }) => {
+  const { t } = useTranslation();
+  const layout = useBehavior(vm.layout$);
+  const name = useId();
+
+  return (
+    <Switch<"spotlight", "grid">
+      name={name}
+      aria-label={t("layout_switch_label")}
+      leftLabel={t("layout_spotlight_label")}
+      leftValue="spotlight"
+      leftIcon={SpotlightViewIcon}
+      rightLabel={t("layout_grid_label")}
+      rightValue="grid"
+      rightIcon={GridIcon}
+      className={className}
+      value={layout}
+      onChange={vm.setLayout}
+    />
+  );
+};
--- a/src/room/VideoPreview.module.css
+++ b/src/room/VideoPreview.module.css
@@ -10,6 +10,8 @@ Please see LICENSE in the repository root for full details.
  margin-right: var(--content-inset-right);
  min-block-size: 0;
  block-size: 50vh;
+  aspect-ratio: 16 / 9;
+  max-width: 100%;
  border-radius: var(--cpd-space-4x);
  position: relative;
  overflow: hidden;
@@ -66,12 +68,6 @@ video.mirror {
  );
 }

-@media (min-aspect-ratio: 1 / 1) {
-  .preview > video {
-    aspect-ratio: 16 / 9;
-  }
-}
-
@media (max-width: 550px) {
  .preview {
    margin-inline: 0;
--- a/src/room/VideoPreview.tsx
+++ b/src/room/VideoPreview.tsx
@@ -14,6 +14,7 @@ import { useTranslation } from "react-i18next";
 import { TileAvatar } from "../tile/TileAvatar";
 import styles from "./VideoPreview.module.css";
 import { type EncryptionSystem } from "../e2ee/sharedKeyManagement";
+import videoPlaceholder from "../graphics/video-placeholder.gif";

 export type MatrixInfo = {
  userId: string;
@@ -74,6 +75,9 @@ export const VideoPreview: FC<Props> = ({
        // There's no reason for this to be focusable
        tabIndex={-1}
        disablePictureInPicture
+        // Set the placeholder to a small transparent image. (On Android web
+        // views the default poster image is particularly ugly.)
+        poster={videoPlaceholder}
      />
      {(!videoEnabled || cameraIsStarting) && (
        <>
--- a/src/room/snapshots/InCallView.test.tsx.snap
+++ b/src/room/snapshots/InCallView.test.tsx.snap
@@ -87,14 +87,14 @@ exports[`InCallView > rendering > renders 1`] = `
      class="_scrollingGrid_4e7ff8 _grid_b0d1cd"
    >
      <div
-        class="_layer_b00c5f"
+        class="_layer_185815"
      >
        <div
-          class="_container_b00c5f _slot_b0d1cd"
+          class="_container_185815 _slot_b0d1cd"
          data-id="1"
        >
          <div
-            class="_slot_b00c5f _local_b00c5f _slot_b0d1cd"
+            class="_slot_185815 _local_185815 _slot_b0d1cd"
            data-block-alignment="start"
            data-id="0"
            data-inline-alignment="end"
@@ -405,7 +405,7 @@ exports[`InCallView > rendering > renders 1`] = `
        </button>
        <button
          aria-labelledby="_r_14_"
-          class="_button_1nw83_8 _endCall_204dcb _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
+          class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
          data-kind="primary"
          data-size="lg"
          data-testid="incall_leave"
@@ -428,12 +428,12 @@ exports[`InCallView > rendering > renders 1`] = `
      </div>
      <fieldset
        aria-label="Layout"
-        class="_toggle_13rnk_9 _layout_20b7b4"
+        class="_toggle_1t5ha_9 _layout_20b7b4"
        data-size="lg"
      >
        <input
-          aria-labelledby="_r_19_"
-          name="layoutMode"
+          aria-labelledby="_r_1a_"
+          name="_r_19_"
          type="radio"
          value="spotlight"
        />
@@ -446,13 +446,15 @@ exports[`InCallView > rendering > renders 1`] = `
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
-            d="M5 5h14v8h-5a1 1 0 0 0-1 1v5H5zm10 14v-4h4v4zM5 21h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2"
+            clip-rule="evenodd"
+            d="M20 6H4v12h16zM4 4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z"
+            fill-rule="evenodd"
          />
        </svg>
        <input
-          aria-labelledby="_r_1e_"
+          aria-labelledby="_r_1f_"
          checked=""
-          name="layoutMode"
+          name="_r_19_"
          type="radio"
          value="grid"
        />
--- a/src/room/snapshots/LobbyView.test.tsx.snap
+++ b/src/room/snapshots/LobbyView.test.tsx.snap
@@ -49,6 +49,7 @@ exports[`LobbyView > renders with AppBar android 1`] = `
        <video
          disablepictureinpicture=""
          playsinline=""
+          poster="/src/graphics/video-placeholder.gif"
          tabindex="-1"
        />
        <div
@@ -84,7 +85,7 @@ exports[`LobbyView > renders with AppBar android 1`] = `
        </div>
      </div>
      <a
-        class="_link_k9ljz_8"
+        class="_link_13esb_8"
        data-kind="primary"
        data-size="md"
        href="/"
@@ -205,7 +206,7 @@ exports[`LobbyView > renders with AppBar android 1`] = `
        </button>
        <button
          aria-labelledby="_r_40_"
-          class="_button_1nw83_8 _endCall_204dcb _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
+          class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
          data-kind="primary"
          data-size="lg"
          data-testid="incall_leave"
@@ -280,6 +281,7 @@ exports[`LobbyView > renders with AppBar ios 1`] = `
        <video
          disablepictureinpicture=""
          playsinline=""
+          poster="/src/graphics/video-placeholder.gif"
          tabindex="-1"
        />
        <div
@@ -315,7 +317,7 @@ exports[`LobbyView > renders with AppBar ios 1`] = `
        </div>
      </div>
      <a
-        class="_link_k9ljz_8"
+        class="_link_13esb_8"
        data-kind="primary"
        data-size="md"
        href="/"
@@ -436,7 +438,7 @@ exports[`LobbyView > renders with AppBar ios 1`] = `
        </button>
        <button
          aria-labelledby="_r_54_"
-          class="_button_1nw83_8 _endCall_204dcb _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
+          class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
          data-kind="primary"
          data-size="lg"
          data-testid="incall_leave"
@@ -558,6 +560,7 @@ exports[`LobbyView > renders with header and participant count 1`] = `
        <video
          disablepictureinpicture=""
          playsinline=""
+          poster="/src/graphics/video-placeholder.gif"
          tabindex="-1"
        />
        <div
@@ -592,7 +595,7 @@ exports[`LobbyView > renders with header and participant count 1`] = `
        </div>
      </div>
      <a
-        class="_link_k9ljz_8"
+        class="_link_13esb_8"
        data-kind="primary"
        data-size="md"
        href="/"
@@ -817,7 +820,7 @@ exports[`LobbyView > renders with header and participant count 1`] = `
        </button>
        <button
          aria-labelledby="_r_q_"
-          class="_button_1nw83_8 _endCall_204dcb _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
+          class="_button_1nw83_8 _has-icon_1nw83_60 _icon-only_1nw83_53 _destructive_1nw83_110"
          data-kind="primary"
          data-size="lg"
          data-testid="incall_leave"
--- a/src/state/CallViewModel/CallViewModel.test.ts
+++ b/src/state/CallViewModel/CallViewModel.test.ts
@@ -144,13 +144,13 @@ export interface SpotlightExpandedLayoutSummary {
 }

 export interface OneOnOneLandscapeLayoutSummary {
-  type: "one-on-one-landscape";
+  type: "one-on-one-desktop";
  spotlight: string;
  pip: string;
 }

 export interface OneOnOnePortraitLayoutSummary {
-  type: "one-on-one-portrait";
+  type: "one-on-one-mobile";
  spotlight: string[];
  pip?: string;
  pipSize: "sm" | "lg";
@@ -205,7 +205,7 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
              pip: pip?.id,
            }),
          );
-        case "one-on-one-landscape":
+        case "one-on-one-desktop":
          return combineLatest(
            [l.spotlight.media$, l.pip.media$],
            (spotlight, pip) => ({
@@ -214,7 +214,7 @@ function summarizeLayout$(l$: Observable<Layout>): Observable<LayoutSummary> {
              pip: pip.id,
            }),
          );
-        case "one-on-one-portrait":
+        case "one-on-one-mobile":
          return combineLatest(
            [
              l.spotlight.media$,
@@ -327,8 +327,8 @@ describe.each([
        },
        (vm) => {
          schedule(modeInputMarbles, {
-            s: () => vm.setGridMode("spotlight"),
-            g: () => vm.setGridMode("grid"),
+            s: () => vm.layoutSwitchVm$.value!.setLayout("spotlight"),
+            g: () => vm.layoutSwitchVm$.value!.setLayout("grid"),
          });

          expectObservable(summarizeLayout$(vm.layout$)).toBe(
@@ -437,7 +437,7 @@ describe.each([
            expectedLayoutMarbles,
            {
              a: {
-                type: "one-on-one-landscape",
+                type: "one-on-one-desktop",
                pip: `${localId}:0`,
                spotlight: `${aliceId}:0`,
              },
@@ -453,7 +453,7 @@ describe.each([
    });
  });

-  test("one-on-one portrait layout shows local tile when video is enabled", () => {
+  test("one-on-one mobile layout shows local tile when video is enabled", () => {
    withTestScheduler(({ behavior, schedule, expectObservable }) => {
      // Local participant enables their video, then disables it
      const videoInputMarbles = "    ny--n";
@@ -480,19 +480,19 @@ describe.each([
            expectedLayoutMarbles,
            {
              a: {
-                type: "one-on-one-portrait",
+                type: "one-on-one-mobile",
                spotlight: [`${aliceId}:0`],
                pip: undefined,
                pipSize: "lg",
              },
              b: {
-                type: "one-on-one-portrait",
+                type: "one-on-one-mobile",
                spotlight: [`${aliceId}:0`],
                pip: `${localId}:0`,
                pipSize: "lg",
              },
              c: {
-                type: "one-on-one-portrait",
+                type: "one-on-one-mobile",
                spotlight: [`${aliceId}:0`],
                pip: `${localId}:0`,
                pipSize: "sm",
@@ -504,21 +504,21 @@ describe.each([
    });
  });

-  test("one-on-one portrait layout shows name tags in room with 3 members", () => {
-    withTestScheduler(({ behavior, schedule, expectObservable }) => {
+  test("one-on-one mobile layout shows name tags in room with 3 members", () => {
+    withTestScheduler(({ expectObservable }) => {
      withCallViewModel(
        {
          remoteParticipants$: constant([aliceParticipant]),
          // Both Alice and Bob are with us in the room
          roomMembers: [local, alice, bob],
          rtcMembers$: constant([localRtcMember, aliceRtcMember]),
-          windowSize$: constant({ width: 380, height: 700 }), // Mobile phone in portrait
+          windowSize$: constant({ width: 380, height: 700 }), // Mobile phone
        },
        (vm) => {
-          // Uses one-on-one portrait layout
+          // Uses one-on-one mobile layout
          expectObservable(summarizeLayout$(vm.layout$)).toBe("a", {
            a: {
-              type: "one-on-one-portrait",
+              type: "one-on-one-mobile",
              spotlight: [`${aliceId}:0`],
              pip: undefined,
              pipSize: "lg",
@@ -532,6 +532,65 @@ describe.each([
    });
  });

+  test("landscape mobile layouts show screen shares and group call participants", () => {
+    withTestScheduler(({ behavior, expectObservable }) => {
+      // Starts as a one-on-one call, then Alice shares her screen, then Bob
+      // joins, and finally Alice stops sharing her screen
+      const participantInputMarbles = "    a--b";
+      const aliceSharingInputMarbles = "   ny-n";
+      // Starts in one-on-one mobile layout, then goes to spotlight layout for
+      // the screen sharing and group call cases
+      const expectedLayoutMarbles = "      ab-c";
+      // Whether the layout switch is visible. It should be hidden while in
+      // one-on-one layout.
+      const expectedLayoutSwitchMarbles = "ny--";
+
+      withCallViewModel(
+        {
+          remoteParticipants$: behavior(participantInputMarbles, {
+            a: [aliceParticipant],
+            b: [aliceParticipant, bobParticipant],
+          }),
+          roomMembers: [local, alice, bob],
+          rtcMembers$: behavior(participantInputMarbles, {
+            a: [localRtcMember, aliceRtcMember],
+            b: [localRtcMember, aliceRtcMember, bobRtcMember],
+          }),
+          sharingScreen: new Map([
+            [aliceParticipant, behavior(aliceSharingInputMarbles, yesNo)],
+          ]),
+          windowSize$: constant({ width: 700, height: 380 }), // Mobile phone in landscape
+        },
+        (vm) => {
+          expectObservable(summarizeLayout$(vm.layout$)).toBe(
+            expectedLayoutMarbles,
+            {
+              a: {
+                type: "one-on-one-mobile",
+                spotlight: [`${aliceId}:0`],
+                pip: undefined,
+                pipSize: "sm",
+              },
+              b: {
+                type: "spotlight-landscape",
+                spotlight: [`${aliceId}:0:screen-share`],
+                grid: [`${localId}:0`, `${aliceId}:0`],
+              },
+              c: {
+                type: "spotlight-landscape",
+                spotlight: [`${aliceId}:0`],
+                grid: [`${localId}:0`, `${bobId}:0`],
+              },
+            },
+          );
+          expectObservable(
+            vm.layoutSwitchVm$.pipe(map((vm) => vm !== null)),
+          ).toBe(expectedLayoutSwitchMarbles, yesNo);
+        },
+      );
+    });
+  });
+
  test("participants stay in the same order unless to appear/disappear", () => {
    withTestScheduler(({ behavior, schedule, expectObservable }) => {
      const visibilityInputMarbles = "a";
@@ -706,14 +765,14 @@ describe.each([
            {
              a: {
                // This is the expected one-on-one layout for a narrow window
-                type: "one-on-one-portrait",
+                type: "one-on-one-mobile",
                spotlight: [`${aliceId}:0`],
                pip: undefined,
                pipSize: "lg",
              },
              b: {
-                // In a larger window, expect the normal one-on-one layout
-                type: "one-on-one-landscape",
+                // In a larger window, expect the one-on-one desktop layout
+                type: "one-on-one-desktop",
                pip: `${localId}:0`,
                spotlight: `${aliceId}:0`,
              },
@@ -763,7 +822,9 @@ describe.each([
          ]),
        },
        (vm) => {
-          schedule(modeInputMarbles, { s: () => vm.setGridMode("spotlight") });
+          schedule(modeInputMarbles, {
+            s: () => vm.layoutSwitchVm$.value!.setLayout("spotlight"),
+          });

          expectObservable(summarizeLayout$(vm.layout$)).toBe(
            expectedLayoutMarbles,
@@ -969,7 +1030,7 @@ describe.each([
        },
        (vm) => {
          schedule(modeInputMarbles, {
-            s: () => vm.setGridMode("spotlight"),
+            s: () => vm.layoutSwitchVm$.value!.setLayout("spotlight"),
          });
          schedule(expandInputMarbles, {
            a: () => vm.toggleSpotlightExpanded$.value!(),
@@ -1039,7 +1100,7 @@ describe.each([
        },
        (vm) => {
          schedule(modeInputMarbles, {
-            s: () => vm.setGridMode("spotlight"),
+            s: () => vm.layoutSwitchVm$.value!.setLayout("spotlight"),
          });
          schedule(expandInputMarbles, {
            a: () => vm.toggleSpotlightExpanded$.value!(),
@@ -1066,7 +1127,7 @@ describe.each([
  });

  test("expanded spotlight layout hides PiP tile in one-on-one voice call", () => {
-    withTestScheduler(({ behavior, schedule, expectObservable }) => {
+    withTestScheduler(({ schedule, expectObservable }) => {
      withCallViewModel(
        {
          remoteParticipants$: constant([aliceParticipant]),
@@ -1076,9 +1137,15 @@ describe.each([
            [localParticipant, constant(false)],
            [aliceParticipant, constant(false)],
          ]),
-          windowSize$: constant({ width: 700, height: 380 }), // Mobile phone in landscape
        },
        (vm) => {
+          schedule("s", {
+            s: () => vm.layoutSwitchVm$.value!.setLayout("spotlight"),
+          });
+          schedule("a", {
+            a: () => vm.toggleSpotlightExpanded$.value!(),
+          });
+
          // Layout should show remote tile only
          expectObservable(summarizeLayout$(vm.layout$)).toBe("a", {
            a: {
@@ -1110,8 +1177,8 @@ describe.each([
        },
        (vm) => {
          schedule(modeInputMarbles, {
-            s: () => vm.setGridMode("spotlight"),
-            g: () => vm.setGridMode("grid"),
+            s: () => vm.layoutSwitchVm$.value!.setLayout("spotlight"),
+            g: () => vm.layoutSwitchVm$.value!.setLayout("grid"),
          });
          schedule(expandInputMarbles, {
            a: () => vm.toggleSpotlightExpanded$.value!(),
@@ -1177,7 +1244,7 @@ describe.each([
          ]),
        },
        (vm) => {
-          vm.setGridMode("grid");
+          vm.layoutSwitchVm$.value!.setLayout("grid");
          expectObservable(summarizeLayout$(vm.layout$)).toBe(
            expectedLayoutMarbles,
            {
@@ -1187,7 +1254,7 @@ describe.each([
                grid: [`${localId}:0`],
              },
              b: {
-                type: "one-on-one-landscape",
+                type: "one-on-one-desktop",
                pip: `${localId}:0`,
                spotlight: `${aliceId}:0`,
              },
@@ -1220,7 +1287,7 @@ describe.each([
          }),
        },
        (vm) => {
-          vm.setGridMode("grid");
+          vm.layoutSwitchVm$.value!.setLayout("grid");
          expectObservable(summarizeLayout$(vm.layout$)).toBe(
            expectedLayoutMarbles,
            {
@@ -1230,7 +1297,7 @@ describe.each([
                grid: [`${localId}:0`],
              },
              b: {
-                type: "one-on-one-landscape",
+                type: "one-on-one-desktop",
                pip: `${localId}:0`,
                spotlight: `${aliceId}:0`,
              },
@@ -1240,7 +1307,7 @@ describe.each([
                grid: [`${localId}:0`, `${aliceId}:0`, `${daveId}:0`],
              },
              d: {
-                type: "one-on-one-landscape",
+                type: "one-on-one-desktop",
                pip: `${localId}:0`,
                spotlight: `${daveId}:0`,
              },
@@ -1464,7 +1531,7 @@ describe.each([
          // ringing the entire time (even once timed out)
          expectObservable(summarizeLayout$(vm.layout$)).toBe("a", {
            a: {
-              type: "one-on-one-landscape",
+              type: "one-on-one-desktop",
              spotlight: `${localId}:0`,
              pip: `ringing:${aliceUserId}`,
            },
@@ -1510,12 +1577,12 @@ describe.each([
          // ringing the entire time
          expectObservable(summarizeLayout$(vm.layout$)).toBe("a 20ms b", {
            a: {
-              type: "one-on-one-landscape",
+              type: "one-on-one-desktop",
              spotlight: `${localId}:0`,
              pip: `ringing:${aliceUserId}`,
            },
            b: {
-              type: "one-on-one-landscape",
+              type: "one-on-one-desktop",
              spotlight: `${aliceId}:0`,
              pip: `${localId}:0`,
            },
--- a/src/state/CallViewModel/CallViewModel.ts
+++ b/src/state/CallViewModel/CallViewModel.ts
@@ -70,8 +70,8 @@ import { setPipEnabled$ } from "../../controls";
 import { TileStore } from "../TileStore";
 import { gridLikeLayout } from "../GridLikeLayout";
 import { spotlightExpandedLayout } from "../SpotlightExpandedLayout";
-import { oneOnOneLandscapeLayout } from "../OneOnOneLandscapeLayout";
-import { oneOnOnePortraitLayout } from "../OneOnOnePortraitLayout";
+import { oneOnOneDesktopLayout } from "../OneOnOneDesktopLayout";
+import { oneOnOneMobileLayout } from "../OneOnOneMobileLayout";
 import { pipLayout } from "../PipLayout";
 import { type EncryptionSystem } from "../../e2ee/sharedKeyManagement";
 import {
@@ -93,8 +93,8 @@ import {
  type GridLayoutMedia,
  type Layout,
  type LayoutMedia,
-  type OneOnOneLandscapeLayoutMedia,
-  type OneOnOnePortraitLayoutMedia,
+  type OneOnOneDesktopLayoutMedia,
+  type OneOnOneMobileLayoutMedia,
  type SpotlightExpandedLayoutMedia,
  type SpotlightLandscapeLayoutMedia,
  type SpotlightPortraitLayoutMedia,
@@ -141,7 +141,10 @@ import {
 } from "./remoteMembers/MatrixMemberMetadata.ts";
 import { Publisher } from "./localMember/Publisher.ts";
 import { type Connection } from "./remoteMembers/Connection.ts";
-import { createLayoutModeSwitch } from "./LayoutSwitch.ts";
+import {
+  type LayoutSwitchViewModel,
+  createLayoutSwitchViewModel,
+} from "../LayoutSwitchViewModel.ts";
 import {
  createWrappedUserMedia,
  type WrappedUserMediaViewModel,
@@ -201,8 +204,6 @@ const smallMobileCallThreshold = 3;
 // with the interface
 const showFooterMs = 4000;

-export type GridMode = "grid" | "spotlight";
-
 export type WindowMode = "normal" | "narrow" | "flat" | "pip";

 interface LayoutScanState {
@@ -349,8 +350,7 @@ export interface CallViewModel {
  showNameTags$: Behavior<boolean>;
  spotlightExpanded$: Behavior<boolean>;
  toggleSpotlightExpanded$: Behavior<(() => void) | null>;
-  gridMode$: Behavior<GridMode>;
-  setGridMode: (value: GridMode) => void;
+  layoutSwitchVm$: Behavior<LayoutSwitchViewModel | null>;

  // header/footer visibility
  showHeader$: Behavior<boolean>;
@@ -1056,7 +1056,7 @@ export function createCallViewModel$(
    spotlightExpandedToggle$,
  );

-  const { setGridMode, gridMode$ } = createLayoutModeSwitch(
+  const layoutSwitchVm = createLayoutSwitchViewModel(
    scope,
    windowMode$,
    hasRemoteScreenShares$,
@@ -1108,56 +1108,60 @@ export function createCallViewModel$(
      ),
    );

-  const oneOnOneLayoutMedia$: Observable<{
+  const oneOnOneLayoutMedia$: Behavior<{
    local: LocalUserMediaViewModel;
    remote: UserMediaViewModel | RingingMediaViewModel;
-  } | null> = combineLatest([userMedia$, screenShares$]).pipe(
-    switchMap(([userMedia, screenShares]) => {
-      // One-on-one layout only supports 2 user media, no screen shares
-      if (userMedia.length <= 2 && screenShares.length === 0) {
-        const local = userMedia.find(
-          (vm): vm is WrappedUserMediaViewModel & LocalUserMediaViewModel =>
-            vm.type === "user" && vm.local,
-        );
-
-        if (local !== undefined) {
-          const remote = userMedia.find(
-            (vm): vm is WrappedUserMediaViewModel & RemoteUserMediaViewModel =>
-              vm.type === "user" && !vm.local,
+  } | null> = scope.behavior(
+    combineLatest([userMedia$, screenShares$]).pipe(
+      switchMap(([userMedia, screenShares]) => {
+        // One-on-one layout only supports 2 user media, no screen shares
+        if (userMedia.length <= 2 && screenShares.length === 0) {
+          const local = userMedia.find(
+            (vm): vm is WrappedUserMediaViewModel & LocalUserMediaViewModel =>
+              vm.type === "user" && vm.local,
          );

-          if (remote !== undefined) return of({ local, remote });
-
-          // If there's no other user media in the call (could still happen in
-          // this branch due to the duplicate tiles option), we could possibly
-          // show ringing media instead
-          if (userMedia.length === 1)
-            return ringingMedia$.pipe(
-              map(
-                (ringingMedia) =>
-                  ringingMedia && { local, remote: ringingMedia },
-              ),
+          if (local !== undefined) {
+            const remote = userMedia.find(
+              (
+                vm,
+              ): vm is WrappedUserMediaViewModel & RemoteUserMediaViewModel =>
+                vm.type === "user" && !vm.local,
            );
-        }
-      }

-      return of(null);
-    }),
+            if (remote !== undefined) return of({ local, remote });
+
+            // If there's no other user media in the call (could still happen in
+            // this branch due to the duplicate tiles option), we could possibly
+            // show ringing media instead
+            if (userMedia.length === 1)
+              return ringingMedia$.pipe(
+                map(
+                  (ringingMedia) =>
+                    ringingMedia && { local, remote: ringingMedia },
+                ),
+              );
+          }
+        }
+
+        return of(null);
+      }),
+    ),
  );

-  const oneOnOneLandscapeLayoutMedia$: Observable<OneOnOneLandscapeLayoutMedia | null> =
+  const oneOnOneDesktopLayoutMedia$: Observable<OneOnOneDesktopLayoutMedia | null> =
    oneOnOneLayoutMedia$.pipe(
      map((media) => {
        if (media === null) return null;
        return media.remote.type === "ringing"
          ? {
-              type: "one-on-one-landscape" as const,
+              type: "one-on-one-desktop" as const,
              edgeToEdge: false,
              spotlight: media.local,
              pip: media.remote,
            }
          : {
-              type: "one-on-one-landscape" as const,
+              type: "one-on-one-desktop" as const,
              edgeToEdge: false,
              spotlight: media.remote,
              pip: media.local,
@@ -1165,13 +1169,13 @@ export function createCallViewModel$(
      }),
    );

-  const oneOnOnePortraitLayoutMedia$: Observable<OneOnOnePortraitLayoutMedia | null> =
+  const oneOnOneMobileLayoutMedia$: Observable<OneOnOneMobileLayoutMedia | null> =
    oneOnOneLayoutMedia$.pipe(
      switchMap((media) => {
        if (media === null) return of(null);
        return media.local.videoEnabled$.pipe(
          map((videoEnabled) => ({
-            type: "one-on-one-portrait" as const,
+            type: "one-on-one-mobile" as const,
            edgeToEdge: true as const,
            spotlight: media.remote,
            pip: videoEnabled ? media.local : undefined,
@@ -1223,11 +1227,11 @@ export function createCallViewModel$(
      switchMap((windowMode) => {
        switch (windowMode) {
          case "normal":
-            return gridMode$.pipe(
-              switchMap((gridMode) => {
-                switch (gridMode) {
+            return layoutSwitchVm.layout$.pipe(
+              switchMap((layout) => {
+                switch (layout) {
                  case "grid":
-                    return oneOnOneLandscapeLayoutMedia$.pipe(
+                    return oneOnOneDesktopLayoutMedia$.pipe(
                      switchMap((oneOnOne) =>
                        oneOnOne === null ? gridLayoutMedia$ : of(oneOnOne),
                      ),
@@ -1244,7 +1248,7 @@ export function createCallViewModel$(
              }),
            );
          case "narrow":
-            return oneOnOnePortraitLayoutMedia$.pipe(
+            return oneOnOneMobileLayoutMedia$.pipe(
              switchMap((oneOnOne) =>
                oneOnOne === null
                  ? combineLatest([grid$, spotlight$], (grid, spotlight) =>
@@ -1257,17 +1261,23 @@ export function createCallViewModel$(
              ),
            );
          case "flat":
-            return gridMode$.pipe(
-              switchMap((gridMode) => {
-                switch (gridMode) {
-                  case "grid":
-                    // Yes, grid mode actually gets you a "spotlight" layout in
-                    // this window mode.
-                    return spotlightLandscapeLayoutMedia$(true);
-                  case "spotlight":
-                    return spotlightExpandedLayoutMedia$(true);
-                }
-              }),
+            return oneOnOneMobileLayoutMedia$.pipe(
+              switchMap((oneOnOne) =>
+                oneOnOne === null
+                  ? layoutSwitchVm.layout$.pipe(
+                      switchMap((layout) => {
+                        switch (layout) {
+                          case "grid":
+                            // Yes, grid mode actually gets you a "spotlight" layout in
+                            // this window mode.
+                            return spotlightLandscapeLayoutMedia$(true);
+                          case "spotlight":
+                            return spotlightExpandedLayoutMedia$(true);
+                        }
+                      }),
+                    )
+                  : of(oneOnOne),
+              ),
            );
          case "pip":
            return pipLayoutMedia$;
@@ -1295,8 +1305,8 @@ export function createCallViewModel$(
          // indicators. And in one-on-one layout there's no question as to who is
          // speaking.
          case "spotlight-expanded":
-          case "one-on-one-landscape":
-          case "one-on-one-portrait":
+          case "one-on-one-desktop":
+          case "one-on-one-mobile":
            return false;
          default:
            return true;
@@ -1308,7 +1318,7 @@ export function createCallViewModel$(
  const showNameTags$ = scope.behavior<boolean>(
    layoutMedia$.pipe(
      switchMap((l) =>
-        l.type === "pip" || l.type === "one-on-one-portrait"
+        l.type === "pip" || l.type === "one-on-one-mobile"
          ? matrixRoomMembers$.pipe(
              map(
                (members) =>
@@ -1352,6 +1362,22 @@ export function createCallViewModel$(
    layoutMedia$.pipe(map(({ edgeToEdge }) => edgeToEdge)),
  );

+  // Only show the layout switch in cases where it has an effect on the layout
+  const showLayoutSwitch$ = windowMode$.pipe(
+    switchMap((windowMode) => {
+      switch (windowMode) {
+        case "normal":
+          return of(true);
+        case "flat":
+          return oneOnOneLayoutMedia$.pipe(
+            map((oneOnOne) => oneOnOne === null),
+          );
+        default:
+          return of(false);
+      }
+    }),
+  );
+
  const screenTap$ = new Subject<void>();
  const controlsTap$ = new Subject<void>();
  const screenHover$ = new Subject<void>();
@@ -1513,16 +1539,16 @@ export function createCallViewModel$(
                prevTiles,
              );
              break;
-            case "one-on-one-landscape":
-              [layout, newTiles] = oneOnOneLandscapeLayout(
+            case "one-on-one-desktop":
+              [layout, newTiles] = oneOnOneDesktopLayout(
                media,
                landscapePipAlignment$,
                prevTiles,
              );
              pip = layout.pip;
              break;
-            case "one-on-one-portrait":
-              [layout, newTiles] = oneOnOnePortraitLayout(
+            case "one-on-one-mobile":
+              [layout, newTiles] = oneOnOneMobileLayout(
                media,
                portraitPipSize$,
                portraitPipAlignment$,
@@ -1769,8 +1795,9 @@ export function createCallViewModel$(

    spotlightExpanded$: spotlightExpanded$,
    toggleSpotlightExpanded$: toggleSpotlightExpanded$,
-    gridMode$: gridMode$,
-    setGridMode: setGridMode,
+    layoutSwitchVm$: scope.behavior(
+      showLayoutSwitch$.pipe(map((show) => (show ? layoutSwitchVm : null))),
+    ),
    layout$: layout$,
    localMatrixLivekitMember$,
    remoteMatrixLivekitMembers$: scope.behavior(
--- a/src/state/CallViewModel/LayoutSwitch.ts
+++ b/src/state/CallViewModel/LayoutSwitch.ts
@@ -1,93 +0,0 @@
-/*
-Copyright 2025 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import {
-  combineLatest,
-  map,
-  Subject,
-  startWith,
-  skipWhile,
-  switchMap,
-} from "rxjs";
-
-import { type GridMode, type WindowMode } from "./CallViewModel.ts";
-import { constant, type Behavior } from "../Behavior.ts";
-import { type ObservableScope } from "../ObservableScope.ts";
-
-/**
- * Creates a layout mode switch that allows switching between grid and spotlight modes.
- * The actual layout mode might switch automatically to spotlight if there is a
- * remote screen share active or if the window mode is flat.
- *
- * @param scope - The observable scope to manage subscriptions.
- * @param windowMode$ - The current window mode.
- * @param hasRemoteScreenShares$ - A behavior indicating if there are remote screen shares active.
- */
-export function createLayoutModeSwitch(
-  scope: ObservableScope,
-  windowMode$: Behavior<WindowMode>,
-  hasRemoteScreenShares$: Behavior<boolean>,
-): {
-  gridMode$: Behavior<GridMode>;
-  setGridMode: (value: GridMode) => void;
-} {
-  const userSelection$ = new Subject<GridMode>();
-  // Callback to set the grid mode desired by the user.
-  // Notice that this is only a preference, the actual grid mode can be overridden
-  // if there is a remote screen share active.
-  const setGridMode = (value: GridMode): void => userSelection$.next(value);
-
-  /**
-   * The natural grid mode - the mode that the grid would prefer to be in,
-   * not accounting for the user's manual selections.
-   */
-  const naturalGridMode$ = scope.behavior<GridMode>(
-    combineLatest(
-      [hasRemoteScreenShares$, windowMode$],
-      (hasRemoteScreenShares, windowMode) =>
-        // When there are screen shares or the window is flat (as with a phone
-        // in landscape orientation), spotlight is a better experience.
-        // We want screen shares to be big and readable, and we want flipping
-        // your phone into landscape to be a quick way of maximising the
-        // spotlight tile.
-        hasRemoteScreenShares || windowMode === "flat" ? "spotlight" : "grid",
-    ),
-  );
-
-  /**
-   * The layout mode of the media tile grid.
-   */
-  const gridMode$ = scope.behavior<GridMode>(
-    // Whenever the user makes a selection, we enter a new mode of behavior:
-    userSelection$.pipe(
-      map((selection) => {
-        if (selection === "grid")
-          // The user has selected grid mode. Start by respecting their choice,
-          // but then follow the natural mode again as soon as it matches.
-          return naturalGridMode$.pipe(
-            skipWhile((naturalMode) => naturalMode !== selection),
-            startWith(selection),
-          );
-
-        // The user has selected spotlight mode. If this matches the natural
-        // mode, then follow the natural mode going forward.
-        return selection === naturalGridMode$.value
-          ? naturalGridMode$
-          : constant(selection);
-      }),
-      // Initially the mode of behavior is to just follow the natural grid mode.
-      startWith(naturalGridMode$),
-      // Switch between each mode of behavior.
-      switchMap((mode$) => mode$),
-    ),
-  );
-
-  return {
-    gridMode$,
-    setGridMode,
-  };
-}
--- a/src/state/CallViewModel/LayoutSwitch.test.ts
+++ b/src/state/CallViewModel/LayoutSwitch.test.ts
@@ -7,31 +7,31 @@ Please see LICENSE in the repository root for full details.

 import { describe, test } from "vitest";

-import { createLayoutModeSwitch } from "./LayoutSwitch";
-import { testScope, withTestScheduler } from "../../utils/test";
+import { createLayoutSwitchViewModel } from "./LayoutSwitchViewModel";
+import { testScope, withTestScheduler } from "../utils/test";

 function testLayoutSwitch({
  windowMode = "n",
  hasScreenShares = "n",
  userSelection = "",
-  expectedGridMode,
+  expectedLayout,
 }: {
  windowMode?: string;
  hasScreenShares?: string;
  userSelection?: string;
-  expectedGridMode: string;
+  expectedLayout: string;
 }): void {
  withTestScheduler(({ behavior, schedule, expectObservable }) => {
-    const { gridMode$, setGridMode } = createLayoutModeSwitch(
+    const { layout$, setLayout } = createLayoutSwitchViewModel(
      testScope(),
      behavior(windowMode, { n: "normal", N: "narrow", f: "flat" }),
      behavior(hasScreenShares, { y: true, n: false }),
    );
    schedule(userSelection, {
-      g: () => setGridMode("grid"),
-      s: () => setGridMode("spotlight"),
+      g: () => setLayout("grid"),
+      s: () => setLayout("spotlight"),
    });
-    expectObservable(gridMode$).toBe(expectedGridMode, {
+    expectObservable(layout$).toBe(expectedLayout, {
      g: "grid",
      s: "spotlight",
    });
@@ -39,94 +39,88 @@ function testLayoutSwitch({
 }

 describe("default mode", () => {
-  test("uses grid layout by default", () =>
+  test("uses grid layout in normal window", () =>
    testLayoutSwitch({
-      expectedGridMode: "g",
+      windowMode: "    n",
+      expectedLayout: "g",
    }));

-  test("uses spotlight mode when window mode is flat", () =>
+  test("uses grid layout in flat window", () =>
    testLayoutSwitch({
-      windowMode: "      f",
-      expectedGridMode: "s",
+      windowMode: "    f",
+      expectedLayout: "g",
    }));
 });

 test("allows switching modes manually", () =>
  testLayoutSwitch({
-    userSelection: "   --sgs",
-    expectedGridMode: "g-sgs",
+    userSelection: " --sgs",
+    expectedLayout: "g-sgs",
  }));

 test("switches to spotlight mode when there is a remote screen share", () =>
  testLayoutSwitch({
-    hasScreenShares: " n--y",
-    expectedGridMode: "g--s",
+    hasScreenShares: "n--y",
+    expectedLayout: " g--s",
  }));

 test("can manually switch to grid when there is a screenshare", () =>
  testLayoutSwitch({
-    hasScreenShares: " n-y",
-    userSelection: "   ---g",
-    expectedGridMode: "g-sg",
+    hasScreenShares: "n-y",
+    userSelection: "  ---g",
+    expectedLayout: " g-sg",
  }));

 test("auto-switches after manually selecting grid", () =>
  testLayoutSwitch({
    // Two screenshares will happen in sequence. There is a screen share that
    // forces spotlight, then the user manually switches back to grid.
-    hasScreenShares: " n-y-ny",
-    userSelection: "   ---g",
-    expectedGridMode: "g-sg-s",
+    hasScreenShares: "n-y-ny",
+    userSelection: "  ---g",
+    expectedLayout: " g-sg-s",
    // If we did want to respect manual selection, the expectation would be: g-sg
  }));

 test("switches back to grid mode when the remote screen share ends", () =>
  testLayoutSwitch({
-    hasScreenShares: " n--y--n",
-    expectedGridMode: "g--s--g",
+    hasScreenShares: "n--y--n",
+    expectedLayout: " g--s--g",
  }));

 test("auto-switches to spotlight again after first screen share ends", () =>
  testLayoutSwitch({
-    hasScreenShares: " nyny",
-    expectedGridMode: "gsgs",
+    hasScreenShares: "nyny",
+    expectedLayout: " gsgs",
  }));

 test("switches manually to grid after screen share while manually in spotlight", () =>
  testLayoutSwitch({
    // Initially, no one is sharing. Then the user manually switches to spotlight.
    // After a screen share starts, the user manually switches to grid.
-    hasScreenShares: " n-y",
-    userSelection: "   -s-g",
-    expectedGridMode: "gs-g",
-  }));
-
-test("auto-switches to spotlight when in flat window mode", () =>
-  testLayoutSwitch({
-    // First normal, then narrow, then flat.
-    windowMode: "      nNf",
-    expectedGridMode: "g-s",
+    hasScreenShares: "n-y",
+    userSelection: "  -s-g",
+    expectedLayout: " gs-g",
  }));

 test("allows switching modes manually when in flat window mode", () =>
  testLayoutSwitch({
-    // Window becomes flat, then user switches to grid and back.
+    // Window becomes flat, then user switches to spotlight and back.
    // Finally the window returns to a normal shape.
-    windowMode: "      nf--n",
-    userSelection: "   --gs",
-    expectedGridMode: "gsgsg",
+    windowMode: "    nf--n",
+    userSelection: " --sg",
+    expectedLayout: "g-sg",
  }));

-test("stays in spotlight while there are screen shares even when window mode changes", () =>
+test("switches to grid when in flat window mode even when there are screen shares", () =>
  testLayoutSwitch({
-    windowMode: "      nfn",
-    hasScreenShares: " y",
-    expectedGridMode: "s",
+    windowMode: "     nf",
+    hasScreenShares: "y",
+    expectedLayout: " sg",
  }));

-test("ignores end of screen share until window mode returns to normal", () =>
+test("ignores screen share until window mode returns to normal", () =>
  testLayoutSwitch({
-    windowMode: "      nf-n",
-    hasScreenShares: " y-n",
-    expectedGridMode: "s--g",
+    windowMode: "     f-n",
+    hasScreenShares: "ny-n",
+    expectedLayout: " g-sg",
  }));
--- a/src/state/LayoutSwitchViewModel.ts
+++ b/src/state/LayoutSwitchViewModel.ts
@@ -0,0 +1,99 @@
+/*
+Copyright 2025 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import {
+  combineLatest,
+  map,
+  Subject,
+  startWith,
+  skipWhile,
+  switchAll,
+} from "rxjs";
+
+import { type WindowMode } from "./CallViewModel/CallViewModel.ts";
+import { constant, type Behavior } from "./Behavior.ts";
+import { type ObservableScope } from "./ObservableScope.ts";
+
+export type LayoutMode = "spotlight" | "grid";
+
+export interface LayoutSwitchViewModel {
+  /**
+   * The layout mode of the call's media tiles.
+   */
+  layout$: Behavior<LayoutMode>;
+  setLayout: (value: LayoutMode) => void;
+}
+
+/**
+ * Creates a layout mode switch that allows switching between grid and spotlight layouts.
+ * The actual layout mode might switch automatically to spotlight if there is a
+ * remote screen share active or if the window mode is flat.
+ *
+ * @param scope - The observable scope to manage subscriptions.
+ * @param windowMode$ - The current window mode.
+ * @param hasRemoteScreenShares$ - A behavior indicating if there are remote screen shares active.
+ */
+export function createLayoutSwitchViewModel(
+  scope: ObservableScope,
+  windowMode$: Behavior<WindowMode>,
+  hasRemoteScreenShares$: Behavior<boolean>,
+): LayoutSwitchViewModel {
+  const userSelection$ = new Subject<LayoutMode>();
+  // Callback to set the layout desired by the user.
+  // Notice that this is only a preference, the actual layout can be overridden
+  // if there is a remote screen share active.
+  const setLayout = (value: LayoutMode): void => userSelection$.next(value);
+
+  /**
+   * The natural layout - the layout that the interface would prefer to be in,
+   * not accounting for the user's manual selections.
+   */
+  const naturalLayout$ = scope.behavior<LayoutMode>(
+    combineLatest(
+      [hasRemoteScreenShares$, windowMode$],
+      (hasRemoteScreenShares, windowMode) => {
+        // When the window is flat (as with a phone in landscape orientation),
+        // grid is preferable as there's usually more than enough horizontal
+        // space to fit in some grid tiles on the side.
+        if (windowMode === "flat") return "grid";
+        // When there are screen shares, spotlight is a better experience. We
+        // want them to be big and readable.
+        return hasRemoteScreenShares ? "spotlight" : "grid";
+      },
+    ),
+  );
+
+  /**
+   * The layout mode of the call's media tiles.
+   */
+  const layout$ = scope.behavior<LayoutMode>(
+    // Whenever the user makes a selection, we enter a new mode of behavior:
+    userSelection$.pipe(
+      map((selection) => {
+        if (selection === "grid")
+          // The user has selected grid. Start by respecting their choice, but
+          // then follow the natural mode again as soon as it matches.
+          return naturalLayout$.pipe(
+            skipWhile((naturalMode) => naturalMode !== selection),
+            startWith(selection),
+          );
+
+        // The user has selected spotlight. If this matches the natural layout,
+        // then follow the natural layout going forward.
+        return selection === naturalLayout$.value
+          ? naturalLayout$
+          : constant(selection);
+      }),
+      // Initially the mode of behavior is to just follow the natural layout.
+      startWith(naturalLayout$),
+      // Switch between each mode of behavior.
+      switchAll(),
+    ),
+  );
+
+  return { layout$, setLayout };
+}
--- a/src/state/OneOnOneLandscapeLayout.ts
+++ b/src/state/OneOnOneLandscapeLayout.ts
@@ -10,19 +10,19 @@ import { type BehaviorSubject } from "rxjs";

 import {
  type Alignment,
-  type OneOnOneLandscapeLayout,
-  type OneOnOneLandscapeLayoutMedia,
+  type OneOnOneDesktopLayout,
+  type OneOnOneDesktopLayoutMedia,
 } from "./layout-types";
 import { type TileStore } from "./TileStore";

 /**
- * Produces a one-on-one landscape layout with the given media.
+ * Produces a one-on-one desktop layout with the given media.
 */
-export function oneOnOneLandscapeLayout(
-  media: OneOnOneLandscapeLayoutMedia,
+export function oneOnOneDesktopLayout(
+  media: OneOnOneDesktopLayoutMedia,
  pipAlignment$: BehaviorSubject<Alignment>,
  prevTiles: TileStore,
-): [OneOnOneLandscapeLayout, TileStore] {
+): [OneOnOneDesktopLayout, TileStore] {
  const update = prevTiles.from(2);
  update.registerGridTile(media.pip);
  update.registerGridTile(media.spotlight);
--- a/src/state/OneOnOnePortraitLayout.ts
+++ b/src/state/OneOnOnePortraitLayout.ts
@@ -10,21 +10,21 @@ import { type BehaviorSubject } from "rxjs";

 import {
  type Alignment,
-  type OneOnOnePortraitLayout,
-  type OneOnOnePortraitLayoutMedia,
+  type OneOnOneMobileLayout,
+  type OneOnOneMobileLayoutMedia,
 } from "./layout-types";
 import { type TileStore } from "./TileStore";
 import { type Behavior } from "./Behavior";

 /**
- * Produces a one-on-one portrait layout with the given media.
+ * Produces a one-on-one mobile layout with the given media.
 */
-export function oneOnOnePortraitLayout(
-  media: OneOnOnePortraitLayoutMedia,
+export function oneOnOneMobileLayout(
+  media: OneOnOneMobileLayoutMedia,
  pipSize$: Behavior<"sm" | "lg">,
  pipAlignment$: BehaviorSubject<Alignment>,
  prevTiles: TileStore,
-): [OneOnOnePortraitLayout, TileStore] {
+): [OneOnOneMobileLayout, TileStore] {
  const update = prevTiles.from(media.pip === undefined ? 0 : 1);
  update.registerSpotlight([media.spotlight], true, "transparent");
  if (media.pip !== undefined) update.registerGridTile(media.pip);
--- a/src/state/ServiceInterruptionsViewModel.ts
+++ b/src/state/ServiceInterruptionsViewModel.ts
@@ -0,0 +1,27 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+export type Service =
+  | { name: "encryption-keys" }
+  | { name: "reactions" }
+  | { name: "screen-sharing" }
+  | { name: "local-media" }
+  | {
+      name: "remote-media";
+      /**
+       * The number of users affected, for the purpose of pluralising the
+       * strings.
+       */
+      count: number;
+    };
+
+export interface ServiceInterruptionsViewModel {
+  /**
+   * A non-empty array of services which are temporarily unavailable.
+   */
+  unavailable: Service[];
+}
--- a/src/state/layout-types.ts
+++ b/src/state/layout-types.ts
@@ -45,15 +45,15 @@ export interface SpotlightExpandedLayoutMedia {
  pip?: UserMediaViewModel;
 }

-export interface OneOnOneLandscapeLayoutMedia {
-  type: "one-on-one-landscape";
+export interface OneOnOneDesktopLayoutMedia {
+  type: "one-on-one-desktop";
  edgeToEdge: false;
  spotlight: UserMediaViewModel;
  pip: LocalUserMediaViewModel | RingingMediaViewModel;
 }

-export interface OneOnOnePortraitLayoutMedia {
-  type: "one-on-one-portrait";
+export interface OneOnOneMobileLayoutMedia {
+  type: "one-on-one-mobile";
  edgeToEdge: true;
  spotlight: UserMediaViewModel | RingingMediaViewModel;
  pip?: LocalUserMediaViewModel;
@@ -70,8 +70,8 @@ export type LayoutMedia =
  | SpotlightLandscapeLayoutMedia
  | SpotlightPortraitLayoutMedia
  | SpotlightExpandedLayoutMedia
-  | OneOnOneLandscapeLayoutMedia
-  | OneOnOnePortraitLayoutMedia
+  | OneOnOneDesktopLayoutMedia
+  | OneOnOneMobileLayoutMedia
  | PipLayoutMedia;

 export interface Alignment {
@@ -108,15 +108,15 @@ export interface SpotlightExpandedLayout {
  pipAlignment$: BehaviorSubject<Alignment>;
 }

-export interface OneOnOneLandscapeLayout {
-  type: "one-on-one-landscape";
+export interface OneOnOneDesktopLayout {
+  type: "one-on-one-desktop";
  spotlight: GridTileViewModel;
  pip: GridTileViewModel;
  pipAlignment$: BehaviorSubject<Alignment>;
 }

-export interface OneOnOnePortraitLayout {
-  type: "one-on-one-portrait";
+export interface OneOnOneMobileLayout {
+  type: "one-on-one-mobile";
  spotlight: SpotlightTileViewModel;
  pip?: GridTileViewModel;
  pipSize$: Behavior<"sm" | "lg">;
@@ -137,6 +137,6 @@ export type Layout =
  | SpotlightLandscapeLayout
  | SpotlightPortraitLayout
  | SpotlightExpandedLayout
-  | OneOnOneLandscapeLayout
-  | OneOnOnePortraitLayout
+  | OneOnOneDesktopLayout
+  | OneOnOneMobileLayout
  | PipLayout;
--- a/src/tabs/Tabs.test.tsx
+++ b/src/tabs/Tabs.test.tsx
@@ -0,0 +1,124 @@
+/*
+Copyright 2026 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { expect, it, vi } from "vitest";
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { type Tab, TabContainer } from "./Tabs";
+
+function renderTabs<K extends string>(tabs: Tab<K>[], tab: K): void {
+  render(
+    <TabContainer
+      label="Settings"
+      tab={tab}
+      onTabChange={vi.fn()}
+      tabs={tabs}
+    />,
+  );
+}
+
+function expectTabPositions(expectedNames: string[]): void {
+  const tabs = within(
+    screen.getByRole("tablist", { name: "Settings" }),
+  ).getAllByRole("tab");
+
+  expect(tabs).toHaveLength(expectedNames.length);
+  tabs.forEach((tab, index) => {
+    expect(tab).toHaveTextContent(expectedNames[index]);
+    expect(tab).toHaveAttribute(
+      "aria-setsize",
+      expectedNames.length.toString(),
+    );
+    expect(tab).toHaveAttribute("aria-posinset", (index + 1).toString());
+  });
+}
+
+it("sets tab collection size and positions for two tabs", () => {
+  renderTabs(
+    [
+      { key: "audio", name: "Audio", content: "Audio panel" },
+      { key: "video", name: "Video", content: "Video panel" },
+    ],
+    "audio",
+  );
+
+  expectTabPositions(["Audio", "Video"]);
+});
+
+it("sets tab collection size and positions for four tabs", () => {
+  renderTabs(
+    [
+      { key: "audio", name: "Audio", content: "Audio panel" },
+      { key: "video", name: "Video", content: "Video panel" },
+      { key: "profile", name: "Profile", content: "Profile panel" },
+      {
+        key: "preferences",
+        name: "Preferences",
+        content: "Preferences panel",
+      },
+    ],
+    "profile",
+  );
+
+  expectTabPositions(["Audio", "Video", "Profile", "Preferences"]);
+});
+
+it("fires tab changes and keeps the active tab selected", async () => {
+  const user = userEvent.setup();
+  const onTabChange = vi.fn();
+  const tabs = [
+    { key: "audio", name: "Audio", content: "Audio panel" },
+    { key: "video", name: "Video", content: "Video panel" },
+  ] satisfies Tab<string>[];
+
+  const { rerender } = render(
+    <TabContainer
+      label="Settings"
+      tab="audio"
+      onTabChange={onTabChange}
+      tabs={tabs}
+    />,
+  );
+
+  expect(screen.getByRole("tab", { name: "Audio" })).toHaveAttribute(
+    "aria-selected",
+    "true",
+  );
+
+  await user.click(screen.getByRole("tab", { name: "Video" }));
+  expect(onTabChange).toHaveBeenCalledWith("video");
+
+  rerender(
+    <TabContainer
+      label="Settings"
+      tab="video"
+      onTabChange={onTabChange}
+      tabs={tabs}
+    />,
+  );
+
+  expect(screen.getByRole("tab", { name: "Video" })).toHaveAttribute(
+    "aria-selected",
+    "true",
+  );
+});
+
+it("only shows the selected tab panel", () => {
+  renderTabs(
+    [
+      { key: "audio", name: "Audio", content: "Audio panel" },
+      { key: "video", name: "Video", content: "Video panel" },
+      { key: "profile", name: "Profile", content: "Profile panel" },
+    ],
+    "video",
+  );
+
+  expect(screen.getByText("Audio panel")).not.toBeVisible();
+  expect(screen.getByText("Video panel")).toBeVisible();
+  expect(screen.getByText("Profile panel")).not.toBeVisible();
+});
--- a/src/tabs/Tabs.tsx
+++ b/src/tabs/Tabs.tsx
@@ -34,10 +34,12 @@ export function TabContainer<K extends Key>({
  return (
    <div className={styles.tabContainer}>
      <NavBar role="tablist" aria-label={label} className={styles.tabList}>
-        {tabs.map(({ key, name }) => (
+        {tabs.map(({ key, name }, index) => (
          <NavItem
            key={key}
            aria-controls={`${idPrefix}[${key}]`}
+            aria-posinset={index + 1}
+            aria-setsize={tabs.length}
            onClick={() => onTabChange(key)}
            active={key === tab}
          >
--- a/src/tile/MediaView.tsx
+++ b/src/tile/MediaView.tsx
@@ -25,6 +25,7 @@ import {
 import { type ReactionOption } from "../reactions";
 import { ReactionIndicator } from "../reactions/ReactionIndicator";
 import { RTCConnectionStats } from "../RTCConnectionStats";
+import videoPlaceholder from "../graphics/video-placeholder.gif";

 interface Props extends ComponentProps<typeof animated.div> {
  className?: string;
@@ -154,6 +155,9 @@ export const MediaView: FC<Props> = ({
            tabIndex={-1}
            disablePictureInPicture
            data-testid="video"
+            // Set the placeholder to a small transparent image. (On Android web
+            // views the default poster image is particularly ugly.)
+            poster={videoPlaceholder}
          />
        )}
      </div>
Author	SHA1	Message	Date
Robin	2de7fdde10	Fix layout switches not showing their state on the combined docs page On the combined Storybook docs page for the call footer, the layout switches would not show the correct state until you hovered over them because they all shared the same input name and thus were interpreted as belonging to the same radio group.	2026-07-28 15:06:15 +02:00
Robin	5a96d1769e	Only show layout switch when it has an effect on the layout	2026-07-28 15:06:15 +02:00
Robin	a443a55bec	Factor out a layout switch view + view model So it can easily be shown and hidden wholesale.	2026-07-28 15:06:15 +02:00
Robin	9b2d9fdd1f	Merge pull request #4129 from element-hq/landscape-default-grid Prefer grid mode in landscape on mobile	2026-07-28 14:29:30 +02:00
Robin	05ad9b2475	Merge pull request #4128 from element-hq/landscape-default-grid Use a proper one-on-one layout for landscape mobile calls	2026-07-28 14:08:48 +02:00
Robin	7962d02be5	Prefer grid mode in landscape on mobile	2026-07-28 11:56:01 +02:00
Robin	5c35288162	Turn the local video tile landscape in landscape mobile one-on-one calls	2026-07-28 11:53:26 +02:00
Robin	aa6732da19	Use an actual one-on-one layout in landscape on mobile	2026-07-28 11:53:26 +02:00
Valere Fedronic	65ac11e952	Merge pull request #4125 from element-hq/valere/bug_poster_safari fix: Safari preview tile no video is 16px wide only	2026-07-28 10:55:01 +02:00
Robin	0b21cff020	Rename one-on-one layouts to be orientation-agnostic	2026-07-27 18:28:52 +02:00
Robin	062e0a00fb	Remove unused variables from CallViewModel tests	2026-07-27 18:13:51 +02:00
Valere	53ae78c609	break ratio when tile bigger than screen	2026-07-27 17:25:56 +02:00
Valere	b046c4b569	fix: Safari preview tile no video is 16px wide only	2026-07-27 15:43:35 +02:00
ElementRobot	e20abb19fb	Merge pull request #4119 from element-hq/actions/localazy-download Localazy Download	2026-07-20 16:23:58 +01:00
Johannes Marbach	bf76f47357	delint	2026-07-20 17:03:55 +02:00
Johennes	9c2d3d067d	Translations updates	2026-07-20 14:58:37 +00:00
Robin	ae7ede3201	Merge pull request #4113 from element-hq/vulnerable-dependencies Resolve most existing Dependbot warnings	2026-07-16 09:28:13 +02:00
Robin	e5ff431b7a	Merge pull request #4112 from element-hq/disable-poster Hide the browser's default placeholder image for videos	2026-07-16 09:21:27 +02:00
Robin	66a676f2f5	Resolve most existing Dependbot warnings	2026-07-15 18:05:06 +02:00
Robin	d33dedd038	Hide the browser's default placeholder image for videos Source: https://stackoverflow.com/a/79058682	2026-07-15 17:26:02 +02:00
renovate[bot]	1f2837f86a	Update ghcr.io/element-hq/element-web:develop Docker digest to 07ccf47 (#4111 ) * Update ghcr.io/element-hq/element-web:develop Docker digest to d184182 * Target the toast 'Join' button specifically in end-to-end tests --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Robin <robin@robin.town>	2026-07-15 14:34:34 +00:00
Robin	927cf68110	Merge pull request #4109 from element-hq/service-interruptions-vm Create service interruptions view model	2026-07-14 12:21:18 +02:00
Robin	cd72ad0008	Create service interruptions view model	2026-07-14 12:02:36 +02:00
Robin	2d2e85e340	Merge pull request #4107 from element-hq/spotlight-icon Update spotlight icon	2026-07-14 09:34:50 +02:00
Johannes Marbach	4da1b9a02a	Merge pull request #4082 from element-hq/johannes/docker-compose-renovate Make renovate track docker-compose files and pin synapse / element-web for playwright tests	2026-07-14 07:55:17 +02:00
Robin	73758f7f77	Merge pull request #4108 from element-hq/renovate/compound Update Compound	2026-07-13 18:37:15 +02:00
Robin	c433c36687	Update snapshots	2026-07-13 18:20:56 +02:00
Robin	3e9d7b7cf7	Exclude packages developed in-house from release age requirements	2026-07-13 17:00:02 +02:00
renovate[bot]	2a56d2afb8	Update Compound	2026-07-13 14:35:37 +00:00
Robin	bff41ad66a	Update spotlight icon	2026-07-13 12:22:44 +02:00
Robin	1d088911e1	Merge pull request #4105 from element-hq/renovate/compound Update dependency @vector-im/compound-web to v9.7.1	2026-07-13 11:10:21 +02:00
Timo	f23eb96555	Merge pull request #4025 from mvanhorn/fix/3915-settings-tabbar-announce-position fix: announce tab count and position in settings tab bar	2026-07-13 10:16:52 +02:00
renovate[bot]	0d4e7defb6	Update dependency @vector-im/compound-web to v9.7.1	2026-07-13 00:42:33 +00:00
Timo K.	023aec22ca	Update docker-compose-playwright.yml	2026-07-10 17:45:53 +02:00
Timo K.	bf4cee9898	update to latest EW (this fixes the playwright tests)	2026-07-10 17:39:36 +02:00
Timo K.	147ff131f4	Merge branch 'livekit' into johannes/docker-compose-renovate	2026-07-10 12:59:06 +02:00
Robin	3e5edd03a6	Merge pull request #4100 from element-hq/remove-stopgap-styles Stop using colors from previous design system	2026-07-09 16:37:02 +02:00
Robin	0afefa4889	Merge branch 'livekit' into remove-stopgap-styles	2026-07-09 16:21:06 +02:00
Timo K.	49a762832b	Merge branch 'livekit' into johannes/docker-compose-renovate	2026-07-09 14:03:18 +02:00
Timo K.	3cf5cab1d2	Add additional renovate packageGroup for element-web	2026-07-09 13:20:57 +02:00
Robin	5968554e4c	Merge pull request #4067 from element-hq/mobile-gradient Improve the look of voice calls and group calls on mobile	2026-07-09 13:17:12 +02:00
Robin	2684fa1d62	Remove unused class for end call button	2026-07-09 12:46:45 +02:00
Robin	de75a69cad	Remove stopgap color variables from previous design system They have been largely unused for a long time. This changes the colors of checkboxes and the 'end call' button to align with current designs as well.	2026-07-09 12:28:39 +02:00
Johannes Marbach	1811b36205	Make renovate track docker-compose files and pin synapse / element-web for playwright tests	2026-07-03 08:48:28 +02:00
Matt Van Horn	9a2fc883b6	fix: announce tab count and position in settings tab bar	2026-06-08 00:49:43 -07:00