From cf642aa670b5586c97e7d1e568259071f16bd084 Mon Sep 17 00:00:00 2001
From: Timo K <toger5@hotmail.de>
Date: Wed, 8 Apr 2026 16:05:46 +0200
Subject: [PATCH 01/14] Move settings button out of the button bar. User
 overflow button instead: at the top for mobile, bottom left for web.

---
 src/AppBar.tsx                 | 11 ++--
 src/button/Button.tsx          | 10 ++--
 src/room/InCallView.module.css | 30 ++++++++---
 src/room/InCallView.tsx        | 98 ++++++++++++++++++----------------
 src/room/LobbyView.tsx         |  2 +-
 5 files changed, 89 insertions(+), 62 deletions(-)

diff --git a/src/AppBar.tsx b/src/AppBar.tsx
index aaa7565e..72ee9285 100644
--- a/src/AppBar.tsx
+++ b/src/AppBar.tsx
@@ -16,7 +16,7 @@ import {
   useMemo,
   useState,
 } from "react";
-import { Heading, IconButton, Tooltip } from "@vector-im/compound-web";
+import { Button, Heading, Tooltip } from "@vector-im/compound-web";
 import { CollapseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 import { useTranslation } from "react-i18next";
 
@@ -68,9 +68,12 @@ export const AppBar: FC<Props> = ({ children }) => {
         >
           <LeftNav>
             <Tooltip label={t("common.back")}>
-              <IconButton onClick={onBackClick}>
-                <CollapseIcon />
-              </IconButton>
+              <Button
+                kind={"tertiary"}
+                iconOnly
+                Icon={CollapseIcon}
+                onClick={onBackClick}
+              />
             </Tooltip>
           </LeftNav>
           {title && (
diff --git a/src/button/Button.tsx b/src/button/Button.tsx
index 0b8d7144..407b74cb 100644
--- a/src/button/Button.tsx
+++ b/src/button/Button.tsx
@@ -16,10 +16,12 @@ import {
   VideoCallOffSolidIcon,
   EndCallIcon,
   ShareScreenSolidIcon,
-  SettingsSolidIcon,
+  OverflowHorizontalIcon,
+  OverflowVerticalIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import styles from "./Button.module.css";
+import { platform } from "../Platform";
 
 interface MicButtonProps extends ComponentPropsWithoutRef<"button"> {
   enabled: boolean;
@@ -134,8 +136,10 @@ export const SettingsButton: FC<SettingsButtonProps> = (props) => {
     <Tooltip label={t("common.settings")}>
       <CpdButton
         iconOnly
-        Icon={SettingsSolidIcon}
-        kind="secondary"
+        Icon={
+          platform === "android" ? OverflowVerticalIcon : OverflowHorizontalIcon
+        }
+        kind="tertiary"
         {...props}
       />
     </Tooltip>
diff --git a/src/room/InCallView.module.css b/src/room/InCallView.module.css
index 70f7c73a..92f1fc7a 100644
--- a/src/room/InCallView.module.css
+++ b/src/room/InCallView.module.css
@@ -36,13 +36,11 @@ Please see LICENSE in the repository root for full details.
   inset-block-end: 0;
   z-index: var(--call-view-header-footer-layer);
   display: grid;
-  grid-template-columns:
-    minmax(0, var(--inline-content-inset))
-    1fr auto 1fr minmax(0, var(--inline-content-inset));
-  grid-template-areas: ". logo buttons layout .";
+  grid-template-columns: 1fr auto 1fr;
+  grid-template-areas: ". buttons layout";
   align-items: center;
   gap: var(--cpd-space-3x);
-  padding-block: var(--cpd-space-10x);
+  padding: var(--cpd-space-10x) var(--cpd-space-6x);
   background: linear-gradient(
     180deg,
     rgba(0, 0, 0, 0) 0%,
@@ -73,8 +71,13 @@ Please see LICENSE in the repository root for full details.
   pointer-events: initial;
 }
 
+.settingsLogoContainer {
+  display: flex;
+  gap: var(--cpd-space-4x);
+  flex-direction: row;
+}
+
 .logo {
-  grid-area: logo;
   justify-self: start;
   display: flex;
   align-items: center;
@@ -94,12 +97,23 @@ Please see LICENSE in the repository root for full details.
   justify-self: end;
 }
 
+/*First hide the logo*/
 @media (max-width: 660px) {
+  .logo {
+    display: none;
+  }
+}
+
+/*
+With the logo hidden >500px is enough space to show overflow, buttons, layout.
+Once we exceed 500 we hide everything except the buttons.
+*/
+@media (max-width: 500px) {
   .footer {
-    grid-template-areas: ". buttons buttons buttons .";
+    grid-template-areas: "buttons buttons buttons";
   }
 
-  .logo {
+  .settingsLogoContainer {
     display: none;
   }
 
diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index 570d70ff..5e92f8f3 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -42,7 +42,7 @@ import {
   ReactionToggleButton,
 } from "../button";
 import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
-import { type HeaderStyle, useUrlParams } from "../UrlParams";
+import { HeaderStyle, useUrlParams } from "../UrlParams";
 import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts";
 import { widget } from "../widget";
 import styles from "./InCallView.module.css";
@@ -373,30 +373,6 @@ export const InCallView: FC<InCallViewProps> = ({
     [vm],
   );
 
-  useAppBarSecondaryButton(
-    useMemo(() => {
-      if (audioOutputSwitcher === null) return null;
-      const isEarpieceTarget = audioOutputSwitcher.targetOutput === "earpiece";
-      const Icon = isEarpieceTarget ? VoiceCallSolidIcon : VolumeOnSolidIcon;
-      const label = isEarpieceTarget
-        ? t("settings.devices.handset")
-        : t("settings.devices.loudspeaker");
-
-      return (
-        <Tooltip label={label}>
-          <IconButton
-            onClick={(e) => {
-              e.preventDefault();
-              audioOutputSwitcher.switch();
-            }}
-          >
-            <Icon />
-          </IconButton>
-        </Tooltip>
-      );
-    }, [t, audioOutputSwitcher]),
-  );
-
   useAppBarHidden(!showHeader);
 
   let header: ReactNode = null;
@@ -643,14 +619,34 @@ export const InCallView: FC<InCallViewProps> = ({
       />,
     );
   }
-  if (layout.type !== "pip")
-    buttons.push(
-      <SettingsButton
-        size={buttonSize}
-        key="settings"
-        onClick={openSettings}
-      />,
+
+  // In this PR we just move the button ot the bottom bar. We do not yet update its apperance
+  const audioOutputButton = useMemo(() => {
+    if (audioOutputSwitcher === null) return null;
+    const isEarpieceTarget = audioOutputSwitcher.targetOutput === "earpiece";
+    const Icon = isEarpieceTarget ? VoiceCallSolidIcon : VolumeOnSolidIcon;
+    const label = isEarpieceTarget
+      ? t("settings.devices.handset")
+      : t("settings.devices.loudspeaker");
+
+    return (
+      <Tooltip label={label}>
+        <IconButton
+          onClick={(e) => {
+            e.preventDefault();
+            audioOutputSwitcher.switch();
+          }}
+        >
+          <Icon />
+        </IconButton>
+      </Tooltip>
     );
+  }, [t, audioOutputSwitcher]);
+  if (audioOutputButton) buttons.push(audioOutputButton);
+
+  useAppBarSecondaryButton(
+    <SettingsButton key="settings" onClick={openSettings} />,
+  );
 
   buttons.push(
     <EndCallButton
@@ -662,6 +658,20 @@ export const InCallView: FC<InCallViewProps> = ({
       data-testid="incall_leave"
     />,
   );
+
+  const logo = (
+    <div className={styles.logo}>
+      <LogoMark width={24} height={24} aria-hidden />
+      <LogoType
+        width={80}
+        height={11}
+        aria-label={import.meta.env.VITE_PRODUCT_NAME || "Element Call"}
+      />
+      {/* Don't mind this odd placement, it's just a little debug label */}
+      {debugTileLayout ? `Tiles generation: ${tileStoreGeneration}` : undefined}
+    </div>
+  );
+
   const footer = (
     <div
       ref={footerRef}
@@ -671,20 +681,16 @@ export const InCallView: FC<InCallViewProps> = ({
           !showFooter || (!showControls && headerStyle === "none"),
       })}
     >
-      {headerStyle !== "none" && (
-        <div className={styles.logo}>
-          <LogoMark width={24} height={24} aria-hidden />
-          <LogoType
-            width={80}
-            height={11}
-            aria-label={import.meta.env.VITE_PRODUCT_NAME || "Element Call"}
-          />
-          {/* Don't mind this odd placement, it's just a little debug label */}
-          {debugTileLayout
-            ? `Tiles generation: ${tileStoreGeneration}`
-            : undefined}
-        </div>
-      )}
+      <div className={styles.settingsLogoContainer}>
+        {showControls &&
+          headerStyle !== HeaderStyle.AppBar &&
+          layout.type !== "pip" && (
+            <SettingsButton key="settings" onClick={openSettings} />
+          )}
+
+        {headerStyle !== "none" && logo}
+      </div>
+
       {showControls && <div className={styles.buttons}>{buttons}</div>}
       {showControls && (
         <LayoutToggle
diff --git a/src/room/LobbyView.tsx b/src/room/LobbyView.tsx
index 37b334e9..326b9c71 100644
--- a/src/room/LobbyView.tsx
+++ b/src/room/LobbyView.tsx
@@ -228,6 +228,7 @@ export const LobbyView: FC<Props> = ({
         </div>
         <div className={inCallStyles.footer}>
           {recentsButtonInFooter && recentsButton}
+          <SettingsButton onClick={openSettings} />
           <div className={inCallStyles.buttons}>
             <MicButton
               enabled={audioEnabled}
@@ -239,7 +240,6 @@ export const LobbyView: FC<Props> = ({
               onClick={toggleVideo ?? undefined}
               disabled={toggleVideo === null}
             />
-            <SettingsButton onClick={openSettings} />
             {!confineToRoom && <EndCallButton onClick={onLeaveClick} />}
           </div>
         </div>

From 00cfb8bb10c57533d6b228d6de534d9730a0e4ec Mon Sep 17 00:00:00 2001
From: Timo K <toger5@hotmail.de>
Date: Wed, 8 Apr 2026 16:41:54 +0200
Subject: [PATCH 02/14] update test snapshots

---
 src/__snapshots__/AppBar.test.tsx.snap        |  32 ++-
 .../__snapshots__/InCallView.test.tsx.snap    | 234 +++++++++---------
 2 files changed, 133 insertions(+), 133 deletions(-)

diff --git a/src/__snapshots__/AppBar.test.tsx.snap b/src/__snapshots__/AppBar.test.tsx.snap
index 7247c6b9..2dd608a6 100644
--- a/src/__snapshots__/AppBar.test.tsx.snap
+++ b/src/__snapshots__/AppBar.test.tsx.snap
@@ -14,28 +14,24 @@ exports[`AppBar > renders 1`] = `
       >
         <button
           aria-labelledby="_r_0_"
-          class="_icon-button_1215g_8"
-          data-kind="primary"
+          class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
+          data-kind="tertiary"
+          data-size="lg"
           role="button"
-          style="--cpd-icon-button-size: 32px;"
           tabindex="0"
         >
-          <div
-            class="_indicator-icon_147l5_17"
-            style="--cpd-icon-button-size: 100%;"
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <svg
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M12 11.034a1 1 0 0 0 .29.702l.005.005c.18.18.43.29.705.29h8a1 1 0 0 0 0-2h-5.586L22 3.445a1 1 0 0 0-1.414-1.414L14 8.617V3.031a1 1 0 1 0-2 0zm0 1.963a1 1 0 0 0-.29-.702l-.005-.004A1 1 0 0 0 11 12H3a1 1 0 1 0 0 2h5.586L2 20.586A1 1 0 1 0 3.414 22L10 15.414V21a1 1 0 0 0 2 0z"
-              />
-            </svg>
-          </div>
+            <path
+              d="M12 11.034a1 1 0 0 0 .29.702l.005.005c.18.18.43.29.705.29h8a1 1 0 0 0 0-2h-5.586L22 3.445a1 1 0 0 0-1.414-1.414L14 8.617V3.031a1 1 0 1 0-2 0zm0 1.963a1 1 0 0 0-.29-.702l-.005-.004A1 1 0 0 0 11 12H3a1 1 0 1 0 0 2h5.586L2 20.586A1 1 0 1 0 3.414 22L10 15.414V21a1 1 0 0 0 2 0z"
+            />
+          </svg>
         </button>
       </div>
       <div
diff --git a/src/room/__snapshots__/InCallView.test.tsx.snap b/src/room/__snapshots__/InCallView.test.tsx.snap
index e8f72f01..ddd85fe2 100644
--- a/src/room/__snapshots__/InCallView.test.tsx.snap
+++ b/src/room/__snapshots__/InCallView.test.tsx.snap
@@ -165,108 +165,133 @@ exports[`InCallView > rendering > renders 1`] = `
       class="footer"
     >
       <div
-        class="logo"
+        class="settingsLogoContainer"
       >
-        <svg
-          aria-hidden="true"
-          fill="none"
-          height="24"
-          viewBox="0 0 48 48"
-          width="24"
-          xmlns="http://www.w3.org/2000/svg"
+        <button
+          aria-labelledby="_r_8_"
+          class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
+          data-kind="tertiary"
+          data-size="lg"
+          role="button"
+          tabindex="0"
         >
-          <g
-            id="Logo Mark"
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
           >
-            <rect
-              fill="#0DBD8B"
-              height="48"
-              rx="23.93"
-              width="47.86"
+            <path
+              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
             />
-            <g
-              id="Union"
-            >
-              <path
-                d="M21.3075 9.42871C20.3396 9.42871 19.5549 10.214 19.5549 11.1828C19.5549 12.1516 20.3396 12.9369 21.3075 12.9369C25.9321 12.9369 29.6811 16.689 29.6811 21.3175C29.6811 22.2863 30.4657 23.0716 31.4337 23.0716C32.4016 23.0716 33.1863 22.2863 33.1863 21.3175C33.1863 14.7515 27.868 9.42871 21.3075 9.42871Z"
-                fill="white"
-              />
-              <path
-                d="M38.4591 21.3174C38.4591 20.3486 37.6745 19.5633 36.7065 19.5633C35.7386 19.5633 34.9539 20.3486 34.9539 21.3174C34.9539 25.9459 31.2049 29.698 26.5804 29.698C25.6124 29.698 24.8277 30.4833 24.8277 31.4521C24.8277 32.4209 25.6124 33.2062 26.5804 33.2062C33.1408 33.2062 38.4591 27.8834 38.4591 21.3174Z"
-                fill="white"
-              />
-              <path
-                d="M28.3329 36.8173C28.3329 37.786 27.5482 38.5714 26.5803 38.5714C20.0198 38.5714 14.7015 33.2486 14.7015 26.6826C14.7015 25.7138 15.4862 24.9285 16.4541 24.9285C17.4221 24.9285 18.2067 25.7138 18.2067 26.6826C18.2067 31.3111 21.9557 35.0632 26.5803 35.0632C27.5482 35.0632 28.3329 35.8485 28.3329 36.8173Z"
-                fill="white"
-              />
-              <path
-                d="M9.40112 26.6827C9.40112 27.6514 10.1858 28.4368 11.1537 28.4368C12.1217 28.4368 12.9064 27.6514 12.9064 26.6827C12.9064 22.0542 16.6553 18.3021 21.2799 18.3021C22.2478 18.3021 23.0325 17.5167 23.0325 16.548C23.0325 15.5792 22.2478 14.7939 21.2799 14.7939C14.7194 14.7939 9.40112 20.1167 9.40112 26.6827Z"
-                fill="white"
-              />
-            </g>
-          </g>
-        </svg>
-        <svg
-          aria-label="Element Call"
-          fill="none"
-          height="11"
-          viewBox="0 0 160 22"
-          width="80"
-          xmlns="http://www.w3.org/2000/svg"
+          </svg>
+        </button>
+        <div
+          class="logo"
         >
-          <g
-            id="Logo Type"
+          <svg
+            aria-hidden="true"
+            fill="none"
+            height="24"
+            viewBox="0 0 48 48"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
           >
             <g
-              id="Vector"
+              id="Logo Mark"
             >
-              <path
-                d="M14.8673 15.1575H3.39742C3.53293 16.3508 3.96849 17.3036 4.70411 18.0157C5.43974 18.7087 6.40766 19.0551 7.60789 19.0551C8.40159 19.0551 9.11785 18.8626 9.75668 18.4777C10.3955 18.0927 10.8504 17.5731 11.1215 16.9186H14.606C14.1414 18.4392 13.2702 19.671 11.9926 20.6142C10.7343 21.5381 9.24368 22 7.52078 22C5.27519 22 3.45549 21.259 2.06168 19.7769C0.687227 18.2948 0 16.4182 0 14.147C0 11.9335 0.696906 10.0761 2.09072 8.5748C3.48453 7.07349 5.28487 6.32283 7.49174 6.32283C9.69861 6.32283 11.4796 7.06387 12.8347 8.54593C14.2091 10.0087 14.8964 11.8565 14.8964 14.0892L14.8673 15.1575ZM7.49174 9.12336C6.40766 9.12336 5.50749 9.44095 4.79123 10.0761C4.07496 10.7113 3.62972 11.5582 3.45549 12.6168H11.4699C11.315 11.5582 10.8892 10.7113 10.1922 10.0761C9.49534 9.44095 8.59517 9.12336 7.49174 9.12336Z"
-                fill="currentColor"
-              />
-              <path
-                d="M17.2743 17.1785V0H20.7298V17.2362C20.7298 18.0061 21.1557 18.3911 22.0074 18.3911L22.6172 18.3622V21.6247C22.2881 21.6824 21.9397 21.7113 21.5719 21.7113C20.0813 21.7113 18.9875 21.336 18.2906 20.5853C17.6131 19.8346 17.2743 18.699 17.2743 17.1785Z"
-                fill="currentColor"
-              />
-              <path
-                d="M38.71 15.1575H27.2401C27.3756 16.3508 27.8112 17.3036 28.5468 18.0157C29.2824 18.7087 30.2504 19.0551 31.4506 19.0551C32.2443 19.0551 32.9606 18.8626 33.5994 18.4777C34.2382 18.0927 34.6931 17.5731 34.9642 16.9186H38.4487C37.9841 18.4392 37.113 19.671 35.8353 20.6142C34.577 21.5381 33.0864 22 31.3635 22C29.1179 22 27.2982 21.259 25.9044 19.7769C24.5299 18.2948 23.8427 16.4182 23.8427 14.147C23.8427 11.9335 24.5396 10.0761 25.9334 8.5748C27.3272 7.07349 29.1276 6.32283 31.3344 6.32283C33.5413 6.32283 35.3223 7.06387 36.6774 8.54593C38.0518 10.0087 38.7391 11.8565 38.7391 14.0892L38.71 15.1575ZM31.3344 9.12336C30.2504 9.12336 29.3502 9.44095 28.6339 10.0761C27.9177 10.7113 27.4724 11.5582 27.2982 12.6168H35.3126C35.1577 11.5582 34.7319 10.7113 34.035 10.0761C33.3381 9.44095 32.4379 9.12336 31.3344 9.12336Z"
-                fill="currentColor"
-              />
-              <path
-                d="M54.3001 13.0499V21.6535H50.8446V12.6745C50.8446 10.4033 49.8961 9.26772 47.9989 9.26772C46.9729 9.26772 46.1502 9.59493 45.5307 10.2493C44.9306 10.9038 44.6306 11.7988 44.6306 12.9344V21.6535H41.1751V6.66929H44.3692V8.66142C44.737 7.98775 45.2984 7.42957 46.0534 6.98688C46.8084 6.54418 47.7473 6.32283 48.8701 6.32283C50.9608 6.32283 52.4707 7.11199 53.4 8.69029C54.6776 7.11199 56.3812 6.32283 58.5106 6.32283C60.2722 6.32283 61.6273 6.87139 62.5759 7.9685C63.5244 9.04637 63.9987 10.4707 63.9987 12.2415V21.6535H60.5432V12.6745C60.5432 10.4033 59.5947 9.26772 57.6975 9.26772C56.6522 9.26772 55.8198 9.60455 55.2003 10.2782C54.6002 10.9326 54.3001 11.8565 54.3001 13.0499Z"
-                fill="currentColor"
-              />
-              <path
-                d="M81.1834 15.1575H69.7135C69.849 16.3508 70.2846 17.3036 71.0202 18.0157C71.7558 18.7087 72.7237 19.0551 73.924 19.0551C74.7177 19.0551 75.4339 18.8626 76.0728 18.4777C76.7116 18.0927 77.1665 17.5731 77.4375 16.9186H80.9221C80.4575 18.4392 79.5863 19.671 78.3087 20.6142C77.0504 21.5381 75.5598 22 73.8369 22C71.5913 22 69.7716 21.259 68.3778 19.7769C67.0033 18.2948 66.3161 16.4182 66.3161 14.147C66.3161 11.9335 67.013 10.0761 68.4068 8.5748C69.8006 7.07349 71.601 6.32283 73.8078 6.32283C76.0147 6.32283 77.7957 7.06387 79.1508 8.54593C80.5252 10.0087 81.2124 11.8565 81.2124 14.0892L81.1834 15.1575ZM73.8078 9.12336C72.7237 9.12336 71.8236 9.44095 71.1073 10.0761C70.391 10.7113 69.9458 11.5582 69.7716 12.6168H77.786C77.6311 11.5582 77.2052 10.7113 76.5083 10.0761C75.8114 9.44095 74.9113 9.12336 73.8078 9.12336Z"
-                fill="currentColor"
-              />
-              <path
-                d="M86.8426 6.66929V8.66142C87.191 8.007 87.7621 7.45844 88.5558 7.01575C89.3689 6.55381 90.3465 6.32283 91.4886 6.32283C93.2696 6.32283 94.6441 6.86177 95.612 7.93963C96.5993 9.0175 97.0929 10.4514 97.0929 12.2415V21.6535H93.6374V12.6745C93.6374 11.6159 93.3858 10.7883 92.8824 10.1916C92.3985 9.57568 91.6532 9.26772 90.6465 9.26772C89.5431 9.26772 88.672 9.59493 88.0331 10.2493C87.4137 10.9038 87.1039 11.8084 87.1039 12.9633V21.6535H83.6484V6.66929H86.8426Z"
-                fill="currentColor"
-              />
-              <path
-                d="M107.185 18.5932V21.5669C106.759 21.6824 106.159 21.7402 105.384 21.7402C102.442 21.7402 100.971 20.2677 100.971 17.3228V9.41208H98.6766V6.66929H100.971V2.77165H104.426V6.66929H107.243V9.41208H104.426V16.9764C104.426 18.1505 104.987 18.7375 106.11 18.7375L107.185 18.5932Z"
-                fill="currentColor"
-              />
-              <path
-                d="M116.115 18.9881C114.474 17.2035 113.653 14.9429 113.653 12.2064C113.653 9.4699 114.474 7.21782 116.115 5.45015C117.773 3.66548 119.953 2.77314 122.654 2.77314C124.876 2.77314 126.756 3.38503 128.295 4.6088C129.833 5.83258 130.816 7.47277 131.244 9.52939H129.269C128.91 7.99967 128.132 6.7844 126.936 5.88357C125.739 4.98273 124.312 4.53232 122.654 4.53232C120.534 4.53232 118.824 5.23769 117.525 6.64842C116.243 8.05916 115.602 9.91182 115.602 12.2064C115.602 14.501 116.243 16.3536 117.525 17.7644C118.824 19.1751 120.534 19.8805 122.654 19.8805C124.312 19.8805 125.739 19.4301 126.936 18.5292C128.132 17.6284 128.91 16.4131 129.269 14.8834H131.244C130.816 16.94 129.833 18.5802 128.295 19.804C126.756 21.0278 124.876 21.6397 122.654 21.6397C119.953 21.6397 117.773 20.7558 116.115 18.9881Z"
-                fill="currentColor"
-              />
-              <path
-                d="M143.174 15.0874C140.832 15.0874 139.233 15.1384 138.379 15.2403C137.541 15.3253 136.926 15.4698 136.532 15.6738C135.831 16.0647 135.481 16.6936 135.481 17.5604C135.481 19.2261 136.473 20.0589 138.456 20.0589C139.977 20.0589 141.139 19.719 141.943 19.0391C142.763 18.3593 143.174 17.4499 143.174 16.3111V15.0874ZM138.25 21.5632C136.763 21.5632 135.626 21.2062 134.84 20.4924C134.071 19.7615 133.686 18.8012 133.686 17.6114C133.686 16.8295 133.891 16.1327 134.301 15.5208C134.729 14.9089 135.31 14.4585 136.045 14.1695C136.661 13.9316 137.455 13.7786 138.43 13.7106C139.404 13.6256 140.986 13.5831 143.174 13.5831V12.7418C143.174 10.6002 141.943 9.52939 139.481 9.52939C137.361 9.52939 136.131 10.3877 135.789 12.1044H134.019C134.207 10.8466 134.746 9.84383 135.635 9.09597C136.541 8.34811 137.849 7.97418 139.558 7.97418C141.387 7.97418 142.746 8.3991 143.635 9.24894C144.541 10.0988 144.994 11.2716 144.994 12.7673V21.2572H143.251V19.3706C142.345 20.8323 140.678 21.5632 138.25 21.5632Z"
-                fill="currentColor"
-              />
-              <path
-                d="M149.358 18.4018V2.13576H151.178V18.1978C151.178 18.7247 151.264 19.0901 151.435 19.2941C151.623 19.498 151.956 19.6 152.435 19.6L152.948 19.549V21.2062C152.657 21.2572 152.341 21.2827 151.999 21.2827C150.238 21.2827 149.358 20.3224 149.358 18.4018Z"
-                fill="currentColor"
-              />
-              <path
-                d="M155.944 18.4018V2.13576H157.764V18.1978C157.764 18.7247 157.85 19.0901 158.021 19.2941C158.209 19.498 158.542 19.6 159.021 19.6L159.534 19.549V21.2062C159.243 21.2572 158.927 21.2827 158.585 21.2827C156.824 21.2827 155.944 20.3224 155.944 18.4018Z"
-                fill="currentColor"
+              <rect
+                fill="#0DBD8B"
+                height="48"
+                rx="23.93"
+                width="47.86"
               />
+              <g
+                id="Union"
+              >
+                <path
+                  d="M21.3075 9.42871C20.3396 9.42871 19.5549 10.214 19.5549 11.1828C19.5549 12.1516 20.3396 12.9369 21.3075 12.9369C25.9321 12.9369 29.6811 16.689 29.6811 21.3175C29.6811 22.2863 30.4657 23.0716 31.4337 23.0716C32.4016 23.0716 33.1863 22.2863 33.1863 21.3175C33.1863 14.7515 27.868 9.42871 21.3075 9.42871Z"
+                  fill="white"
+                />
+                <path
+                  d="M38.4591 21.3174C38.4591 20.3486 37.6745 19.5633 36.7065 19.5633C35.7386 19.5633 34.9539 20.3486 34.9539 21.3174C34.9539 25.9459 31.2049 29.698 26.5804 29.698C25.6124 29.698 24.8277 30.4833 24.8277 31.4521C24.8277 32.4209 25.6124 33.2062 26.5804 33.2062C33.1408 33.2062 38.4591 27.8834 38.4591 21.3174Z"
+                  fill="white"
+                />
+                <path
+                  d="M28.3329 36.8173C28.3329 37.786 27.5482 38.5714 26.5803 38.5714C20.0198 38.5714 14.7015 33.2486 14.7015 26.6826C14.7015 25.7138 15.4862 24.9285 16.4541 24.9285C17.4221 24.9285 18.2067 25.7138 18.2067 26.6826C18.2067 31.3111 21.9557 35.0632 26.5803 35.0632C27.5482 35.0632 28.3329 35.8485 28.3329 36.8173Z"
+                  fill="white"
+                />
+                <path
+                  d="M9.40112 26.6827C9.40112 27.6514 10.1858 28.4368 11.1537 28.4368C12.1217 28.4368 12.9064 27.6514 12.9064 26.6827C12.9064 22.0542 16.6553 18.3021 21.2799 18.3021C22.2478 18.3021 23.0325 17.5167 23.0325 16.548C23.0325 15.5792 22.2478 14.7939 21.2799 14.7939C14.7194 14.7939 9.40112 20.1167 9.40112 26.6827Z"
+                  fill="white"
+                />
+              </g>
             </g>
-          </g>
-        </svg>
+          </svg>
+          <svg
+            aria-label="Element Call"
+            fill="none"
+            height="11"
+            viewBox="0 0 160 22"
+            width="80"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g
+              id="Logo Type"
+            >
+              <g
+                id="Vector"
+              >
+                <path
+                  d="M14.8673 15.1575H3.39742C3.53293 16.3508 3.96849 17.3036 4.70411 18.0157C5.43974 18.7087 6.40766 19.0551 7.60789 19.0551C8.40159 19.0551 9.11785 18.8626 9.75668 18.4777C10.3955 18.0927 10.8504 17.5731 11.1215 16.9186H14.606C14.1414 18.4392 13.2702 19.671 11.9926 20.6142C10.7343 21.5381 9.24368 22 7.52078 22C5.27519 22 3.45549 21.259 2.06168 19.7769C0.687227 18.2948 0 16.4182 0 14.147C0 11.9335 0.696906 10.0761 2.09072 8.5748C3.48453 7.07349 5.28487 6.32283 7.49174 6.32283C9.69861 6.32283 11.4796 7.06387 12.8347 8.54593C14.2091 10.0087 14.8964 11.8565 14.8964 14.0892L14.8673 15.1575ZM7.49174 9.12336C6.40766 9.12336 5.50749 9.44095 4.79123 10.0761C4.07496 10.7113 3.62972 11.5582 3.45549 12.6168H11.4699C11.315 11.5582 10.8892 10.7113 10.1922 10.0761C9.49534 9.44095 8.59517 9.12336 7.49174 9.12336Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M17.2743 17.1785V0H20.7298V17.2362C20.7298 18.0061 21.1557 18.3911 22.0074 18.3911L22.6172 18.3622V21.6247C22.2881 21.6824 21.9397 21.7113 21.5719 21.7113C20.0813 21.7113 18.9875 21.336 18.2906 20.5853C17.6131 19.8346 17.2743 18.699 17.2743 17.1785Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M38.71 15.1575H27.2401C27.3756 16.3508 27.8112 17.3036 28.5468 18.0157C29.2824 18.7087 30.2504 19.0551 31.4506 19.0551C32.2443 19.0551 32.9606 18.8626 33.5994 18.4777C34.2382 18.0927 34.6931 17.5731 34.9642 16.9186H38.4487C37.9841 18.4392 37.113 19.671 35.8353 20.6142C34.577 21.5381 33.0864 22 31.3635 22C29.1179 22 27.2982 21.259 25.9044 19.7769C24.5299 18.2948 23.8427 16.4182 23.8427 14.147C23.8427 11.9335 24.5396 10.0761 25.9334 8.5748C27.3272 7.07349 29.1276 6.32283 31.3344 6.32283C33.5413 6.32283 35.3223 7.06387 36.6774 8.54593C38.0518 10.0087 38.7391 11.8565 38.7391 14.0892L38.71 15.1575ZM31.3344 9.12336C30.2504 9.12336 29.3502 9.44095 28.6339 10.0761C27.9177 10.7113 27.4724 11.5582 27.2982 12.6168H35.3126C35.1577 11.5582 34.7319 10.7113 34.035 10.0761C33.3381 9.44095 32.4379 9.12336 31.3344 9.12336Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M54.3001 13.0499V21.6535H50.8446V12.6745C50.8446 10.4033 49.8961 9.26772 47.9989 9.26772C46.9729 9.26772 46.1502 9.59493 45.5307 10.2493C44.9306 10.9038 44.6306 11.7988 44.6306 12.9344V21.6535H41.1751V6.66929H44.3692V8.66142C44.737 7.98775 45.2984 7.42957 46.0534 6.98688C46.8084 6.54418 47.7473 6.32283 48.8701 6.32283C50.9608 6.32283 52.4707 7.11199 53.4 8.69029C54.6776 7.11199 56.3812 6.32283 58.5106 6.32283C60.2722 6.32283 61.6273 6.87139 62.5759 7.9685C63.5244 9.04637 63.9987 10.4707 63.9987 12.2415V21.6535H60.5432V12.6745C60.5432 10.4033 59.5947 9.26772 57.6975 9.26772C56.6522 9.26772 55.8198 9.60455 55.2003 10.2782C54.6002 10.9326 54.3001 11.8565 54.3001 13.0499Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M81.1834 15.1575H69.7135C69.849 16.3508 70.2846 17.3036 71.0202 18.0157C71.7558 18.7087 72.7237 19.0551 73.924 19.0551C74.7177 19.0551 75.4339 18.8626 76.0728 18.4777C76.7116 18.0927 77.1665 17.5731 77.4375 16.9186H80.9221C80.4575 18.4392 79.5863 19.671 78.3087 20.6142C77.0504 21.5381 75.5598 22 73.8369 22C71.5913 22 69.7716 21.259 68.3778 19.7769C67.0033 18.2948 66.3161 16.4182 66.3161 14.147C66.3161 11.9335 67.013 10.0761 68.4068 8.5748C69.8006 7.07349 71.601 6.32283 73.8078 6.32283C76.0147 6.32283 77.7957 7.06387 79.1508 8.54593C80.5252 10.0087 81.2124 11.8565 81.2124 14.0892L81.1834 15.1575ZM73.8078 9.12336C72.7237 9.12336 71.8236 9.44095 71.1073 10.0761C70.391 10.7113 69.9458 11.5582 69.7716 12.6168H77.786C77.6311 11.5582 77.2052 10.7113 76.5083 10.0761C75.8114 9.44095 74.9113 9.12336 73.8078 9.12336Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M86.8426 6.66929V8.66142C87.191 8.007 87.7621 7.45844 88.5558 7.01575C89.3689 6.55381 90.3465 6.32283 91.4886 6.32283C93.2696 6.32283 94.6441 6.86177 95.612 7.93963C96.5993 9.0175 97.0929 10.4514 97.0929 12.2415V21.6535H93.6374V12.6745C93.6374 11.6159 93.3858 10.7883 92.8824 10.1916C92.3985 9.57568 91.6532 9.26772 90.6465 9.26772C89.5431 9.26772 88.672 9.59493 88.0331 10.2493C87.4137 10.9038 87.1039 11.8084 87.1039 12.9633V21.6535H83.6484V6.66929H86.8426Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M107.185 18.5932V21.5669C106.759 21.6824 106.159 21.7402 105.384 21.7402C102.442 21.7402 100.971 20.2677 100.971 17.3228V9.41208H98.6766V6.66929H100.971V2.77165H104.426V6.66929H107.243V9.41208H104.426V16.9764C104.426 18.1505 104.987 18.7375 106.11 18.7375L107.185 18.5932Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M116.115 18.9881C114.474 17.2035 113.653 14.9429 113.653 12.2064C113.653 9.4699 114.474 7.21782 116.115 5.45015C117.773 3.66548 119.953 2.77314 122.654 2.77314C124.876 2.77314 126.756 3.38503 128.295 4.6088C129.833 5.83258 130.816 7.47277 131.244 9.52939H129.269C128.91 7.99967 128.132 6.7844 126.936 5.88357C125.739 4.98273 124.312 4.53232 122.654 4.53232C120.534 4.53232 118.824 5.23769 117.525 6.64842C116.243 8.05916 115.602 9.91182 115.602 12.2064C115.602 14.501 116.243 16.3536 117.525 17.7644C118.824 19.1751 120.534 19.8805 122.654 19.8805C124.312 19.8805 125.739 19.4301 126.936 18.5292C128.132 17.6284 128.91 16.4131 129.269 14.8834H131.244C130.816 16.94 129.833 18.5802 128.295 19.804C126.756 21.0278 124.876 21.6397 122.654 21.6397C119.953 21.6397 117.773 20.7558 116.115 18.9881Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M143.174 15.0874C140.832 15.0874 139.233 15.1384 138.379 15.2403C137.541 15.3253 136.926 15.4698 136.532 15.6738C135.831 16.0647 135.481 16.6936 135.481 17.5604C135.481 19.2261 136.473 20.0589 138.456 20.0589C139.977 20.0589 141.139 19.719 141.943 19.0391C142.763 18.3593 143.174 17.4499 143.174 16.3111V15.0874ZM138.25 21.5632C136.763 21.5632 135.626 21.2062 134.84 20.4924C134.071 19.7615 133.686 18.8012 133.686 17.6114C133.686 16.8295 133.891 16.1327 134.301 15.5208C134.729 14.9089 135.31 14.4585 136.045 14.1695C136.661 13.9316 137.455 13.7786 138.43 13.7106C139.404 13.6256 140.986 13.5831 143.174 13.5831V12.7418C143.174 10.6002 141.943 9.52939 139.481 9.52939C137.361 9.52939 136.131 10.3877 135.789 12.1044H134.019C134.207 10.8466 134.746 9.84383 135.635 9.09597C136.541 8.34811 137.849 7.97418 139.558 7.97418C141.387 7.97418 142.746 8.3991 143.635 9.24894C144.541 10.0988 144.994 11.2716 144.994 12.7673V21.2572H143.251V19.3706C142.345 20.8323 140.678 21.5632 138.25 21.5632Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M149.358 18.4018V2.13576H151.178V18.1978C151.178 18.7247 151.264 19.0901 151.435 19.2941C151.623 19.498 151.956 19.6 152.435 19.6L152.948 19.549V21.2062C152.657 21.2572 152.341 21.2827 151.999 21.2827C150.238 21.2827 149.358 20.3224 149.358 18.4018Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M155.944 18.4018V2.13576H157.764V18.1978C157.764 18.7247 157.85 19.0901 158.021 19.2941C158.209 19.498 158.542 19.6 159.021 19.6L159.534 19.549V21.2062C159.243 21.2572 158.927 21.2827 158.585 21.2827C156.824 21.2827 155.944 20.3224 155.944 18.4018Z"
+                  fill="currentColor"
+                />
+              </g>
+            </g>
+          </svg>
+        </div>
       </div>
       <div
         class="buttons"
@@ -274,7 +299,7 @@ exports[`InCallView > rendering > renders 1`] = `
         <button
           aria-checked="false"
           aria-disabled="true"
-          aria-labelledby="_r_8_"
+          aria-labelledby="_r_d_"
           class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
           data-kind="secondary"
           data-size="lg"
@@ -298,7 +323,7 @@ exports[`InCallView > rendering > renders 1`] = `
         <button
           aria-checked="false"
           aria-disabled="true"
-          aria-labelledby="_r_d_"
+          aria-labelledby="_r_i_"
           class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
           data-kind="secondary"
           data-size="lg"
@@ -319,27 +344,6 @@ exports[`InCallView > rendering > renders 1`] = `
             />
           </svg>
         </button>
-        <button
-          aria-labelledby="_r_i_"
-          class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
-          data-kind="secondary"
-          data-size="lg"
-          role="button"
-          tabindex="0"
-        >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M12.731 2C13.432 2 14 2.568 14 3.269c0 .578.396 1.074.935 1.286q.128.052.253.106c.531.23 1.162.16 1.572-.25a1.27 1.27 0 0 1 1.794 0l1.034 1.035a1.27 1.27 0 0 1 0 1.794c-.41.41-.48 1.04-.248 1.572l.105.253c.212.539.708.935 1.286.935.701 0 1.269.568 1.269 1.269v1.462c0 .701-.568 1.269-1.269 1.269-.578 0-1.074.396-1.287.935q-.05.128-.104.253c-.232.531-.161 1.162.248 1.572a1.27 1.27 0 0 1 0 1.794l-1.034 1.034a1.27 1.27 0 0 1-1.794 0c-.41-.41-1.04-.48-1.572-.248a8 8 0 0 1-.253.105c-.539.212-.935.708-.935 1.286 0 .701-.568 1.269-1.269 1.269H11.27c-.702 0-1.27-.568-1.27-1.269 0-.578-.396-1.074-.935-1.287a8 8 0 0 1-.253-.104c-.531-.232-1.162-.161-1.572.248a1.27 1.27 0 0 1-1.794 0l-1.034-1.034a1.27 1.27 0 0 1 0-1.794c.41-.41.48-1.04.249-1.572a8 8 0 0 1-.106-.253C4.343 14.396 3.847 14 3.27 14 2.568 14 2 13.432 2 12.731V11.27c0-.702.568-1.27 1.269-1.27.578 0 1.074-.396 1.286-.935q.052-.128.106-.253c.23-.531.16-1.162-.25-1.572a1.27 1.27 0 0 1 0-1.794l1.035-1.034a1.27 1.27 0 0 1 1.794 0c.41.41 1.04.48 1.572.249a8 8 0 0 1 .253-.106c.539-.212.935-.708.935-1.286C10 2.568 10.568 2 11.269 2zM12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8"
-            />
-          </svg>
-        </button>
         <button
           aria-labelledby="_r_n_"
           class="_button_13vu4_8 endCall _has-icon_13vu4_60 _icon-only_13vu4_53 _destructive_13vu4_110"

From 9d20ec00f1184d70b8615610803ac857dbc18c61 Mon Sep 17 00:00:00 2001
From: Timo K <toger5@hotmail.de>
Date: Thu, 9 Apr 2026 13:23:29 +0200
Subject: [PATCH 03/14] Add test for the media switch button:  - is it
 available in the bottom bar  - does pressing it trigger the expected callback

---
 src/room/InCallView.test.tsx | 92 +++++++++++++++++++++---------------
 src/room/InCallView.tsx      |  2 +-
 src/utils/test-viewmodel.ts  |  5 +-
 3 files changed, 59 insertions(+), 40 deletions(-)

diff --git a/src/room/InCallView.test.tsx b/src/room/InCallView.test.tsx
index 43a689e0..0c3be63b 100644
--- a/src/room/InCallView.test.tsx
+++ b/src/room/InCallView.test.tsx
@@ -15,20 +15,17 @@ import {
   vi,
 } from "vitest";
 import { render, type RenderResult } from "@testing-library/react";
-import { type MatrixClient, JoinRule, type RoomState } from "matrix-js-sdk";
-import { type RelationsContainer } from "matrix-js-sdk/lib/models/relations-container";
 import { type LocalParticipant } from "livekit-client";
-import { of } from "rxjs";
+import { BehaviorSubject, of } from "rxjs";
 import { BrowserRouter } from "react-router-dom";
 import { TooltipProvider } from "@vector-im/compound-web";
 import { RoomContext, useLocalParticipant } from "@livekit/components-react";
+import userEvent from "@testing-library/user-event";
 
 import { InCallView } from "./InCallView";
 import {
   mockLivekitRoom,
   mockLocalParticipant,
-  mockMatrixRoom,
-  mockMatrixRoomMember,
   mockMediaDevices,
   mockMuteStates,
   mockRemoteParticipant,
@@ -43,7 +40,9 @@ import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
 import { LivekitRoomAudioRenderer } from "../livekit/MatrixAudioRenderer";
 import { MediaDevicesContext } from "../MediaDevicesContext";
 import { HeaderStyle } from "../UrlParams";
+import { type MediaDevices as ECMediaDevices } from "../state/MediaDevices";
 import { initializeWidget } from "../widget";
+
 initializeWidget();
 vi.hoisted(
   () =>
@@ -71,10 +70,7 @@ const localParticipant = mockLocalParticipant({
 const remoteParticipant = mockRemoteParticipant({
   identity: "@alice:example.org:AAAAAA",
 });
-const carol = mockMatrixRoomMember(localRtcMember);
-const roomMembers = new Map([carol].map((p) => [p.userId, p]));
 
-const roomId = "!foo:bar";
 let useRoomEncryptionSystemMock: MockedFunction<typeof useRoomEncryptionSystem>;
 
 beforeEach(() => {
@@ -99,36 +95,12 @@ beforeEach(() => {
     useRoomEncryptionSystem as typeof useRoomEncryptionSystemMock;
   useRoomEncryptionSystemMock.mockReturnValue({ kind: E2eeType.NONE });
 });
-
-function createInCallView(): RenderResult & {
+interface CreateInCallViewArgs {
+  mediaDevices?: ECMediaDevices;
+}
+function createInCallView(args: CreateInCallViewArgs = {}): RenderResult & {
   rtcSession: MockRTCSession;
 } {
-  const client = {
-    getUser: () => null,
-    getUserId: () => localRtcMember.userId,
-    getDeviceId: () => localRtcMember.deviceId,
-    getRoom: (rId) => (rId === roomId ? room : null),
-    getDomain: () => "example.com",
-  } as Partial<MatrixClient> as MatrixClient;
-  const room = mockMatrixRoom({
-    relations: {
-      getChildEventsForEvent: () =>
-        vi.mocked({
-          getRelations: () => [],
-        }),
-    } as unknown as RelationsContainer,
-    client,
-    roomId,
-    // getMember: (userId) => roomMembers.get(userId) ?? null,
-    getMembers: () => Array.from(roomMembers.values()),
-    getMxcAvatarUrl: () => null,
-    hasEncryptionStateEvent: vi.fn().mockReturnValue(true),
-    getCanonicalAlias: () => null,
-    currentState: {
-      getJoinRule: () => JoinRule.Invite,
-    } as Partial<RoomState> as RoomState,
-  });
-
   const muteState = mockMuteStates();
   const livekitRoom = mockLivekitRoom(
     {
@@ -138,12 +110,19 @@ function createInCallView(): RenderResult & {
       remoteParticipants$: of([remoteParticipant]),
     },
   );
-  const { vm, rtcSession } = getBasicCallViewModelEnvironment([local, alice]);
+  const { vm, rtcSession } = getBasicCallViewModelEnvironment(
+    [local, alice],
+    undefined,
+    {},
+    args.mediaDevices,
+  );
 
   rtcSession.joined = true;
+  const room = rtcSession.room;
+  const client = room.client;
   const renderResult = render(
     <BrowserRouter>
-      <MediaDevicesContext value={mockMediaDevices({})}>
+      <MediaDevicesContext value={args.mediaDevices ?? mockMediaDevices({})}>
         <ReactionsSenderProvider
           vm={vm}
           rtcSession={rtcSession.asMockedSession()}
@@ -190,4 +169,41 @@ describe("InCallView", () => {
       expect(container).toMatchSnapshot();
     });
   });
+  describe("audioOutputSwitcher", () => {
+    it("is visible and can be clicked", async () => {
+      const user = userEvent.setup();
+      const switchFn = vi.fn();
+      // Create mediaDevices with a speaker and an earpiece available,
+      // with the speaker currently selected.
+      // This is needed so that the audio switcher button is visible
+      const available$ = new BehaviorSubject(
+        new Map<string, { type: "speaker" } | { type: "earpiece" }>([
+          ["speaker-id", { type: "speaker" }],
+          ["earpiece-id", { type: "earpiece" }],
+        ]),
+      );
+      const selected$ = new BehaviorSubject<
+        { id: string; virtualEarpiece: boolean } | undefined
+      >({ id: "speaker-id", virtualEarpiece: false });
+
+      const mediaDevices = mockMediaDevices({
+        audioOutput: {
+          available$,
+          selected$,
+          select: switchFn,
+        },
+      });
+
+      const { getByRole } = createInCallView({ mediaDevices });
+      // The button should be visible. When current output is "speaker",
+      // the switcher targets "earpiece", so the tooltip label is "Handset".
+      const audioOutputBtn = getByRole("button", { name: "Handset" });
+      expect(audioOutputBtn).toBeVisible();
+
+      await user.click(audioOutputBtn);
+
+      // Clicking the button should call select -> switchFn with the earpiece device id
+      expect(switchFn).toHaveBeenCalledWith("earpiece-id");
+    });
+  });
 });
diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index 5e92f8f3..cf445170 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -632,8 +632,8 @@ export const InCallView: FC<InCallViewProps> = ({
     return (
       <Tooltip label={label}>
         <IconButton
+          key="audio_output_switcher"
           onClick={(e) => {
-            e.preventDefault();
             audioOutputSwitcher.switch();
           }}
         >
diff --git a/src/utils/test-viewmodel.ts b/src/utils/test-viewmodel.ts
index 0745be72..ee69d8ea 100644
--- a/src/utils/test-viewmodel.ts
+++ b/src/utils/test-viewmodel.ts
@@ -34,6 +34,7 @@ import {
   MockRTCSession,
   testScope,
 } from "./test";
+import { MediaDevices } from "../state/MediaDevices";
 import { aliceRtcMember, localRtcMember } from "./test-fixtures";
 import { type RaisedHandInfo, type ReactionInfo } from "../reactions";
 import { constant } from "../state/Behavior";
@@ -63,6 +64,7 @@ export function getBasicRTCSession(
       getDeviceId: () => localRtcMember.deviceId,
       getSyncState: () => SyncState.Syncing,
       getDomain: () => null,
+      getAccessToken: () => "fake-token",
       sendEvent: vitest.fn().mockResolvedValue({ event_id: "$fake:event" }),
       redactEvent: vitest.fn().mockResolvedValue({ event_id: "$fake:event" }),
       decryptEventIfNeeded: vitest.fn().mockResolvedValue(undefined),
@@ -131,6 +133,7 @@ export function getBasicCallViewModelEnvironment(
   members: RoomMember[],
   initialRtcMemberships: CallMembership[] = [localRtcMember, aliceRtcMember],
   callViewModelOptions: Partial<CallViewModelOptions> = {},
+  mediaDevicesOverride?: MediaDevices,
 ): {
   vm: CallViewModel;
   rtcMemberships$: BehaviorSubject<CallMembership[]>;
@@ -151,7 +154,7 @@ export function getBasicCallViewModelEnvironment(
     testScope(),
     rtcSession.asMockedSession(),
     matrixRoom,
-    mockMediaDevices({}),
+    mediaDevicesOverride ?? mockMediaDevices({}),
     mockMuteStates(),
     {
       encryptionSystem: { kind: E2eeType.PER_PARTICIPANT },

From a74c8025ac44e901bc3f65961c3fa4bfe9db3214 Mon Sep 17 00:00:00 2001
From: Timo K <toger5@hotmail.de>
Date: Thu, 9 Apr 2026 13:32:29 +0200
Subject: [PATCH 04/14] fix imports

---
 src/utils/test-viewmodel.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/test-viewmodel.ts b/src/utils/test-viewmodel.ts
index ee69d8ea..8ab3c887 100644
--- a/src/utils/test-viewmodel.ts
+++ b/src/utils/test-viewmodel.ts
@@ -34,7 +34,7 @@ import {
   MockRTCSession,
   testScope,
 } from "./test";
-import { MediaDevices } from "../state/MediaDevices";
+import { type MediaDevices } from "../state/MediaDevices";
 import { aliceRtcMember, localRtcMember } from "./test-fixtures";
 import { type RaisedHandInfo, type ReactionInfo } from "../reactions";
 import { constant } from "../state/Behavior";

From 2e9c8bd3ceddf93678bf7d52bfcc8c90bc9164be Mon Sep 17 00:00:00 2001
From: Timo K <toger5@hotmail.de>
Date: Thu, 9 Apr 2026 16:47:42 +0200
Subject: [PATCH 05/14] fix playwright tests

---
 playwright/mobile/create-call-mobile.spec.ts | 4 +++-
 src/room/InCallView.module.css               | 4 ++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/playwright/mobile/create-call-mobile.spec.ts b/playwright/mobile/create-call-mobile.spec.ts
index 1c4eef57..de1e65d1 100644
--- a/playwright/mobile/create-call-mobile.spec.ts
+++ b/playwright/mobile/create-call-mobile.spec.ts
@@ -104,7 +104,9 @@ mobileTest(
 
     // Open settings to select earpiece
     await guestPage.getByRole("button", { name: "Settings" }).click();
-    await guestPage.getByText("Handset", { exact: true }).click();
+    await guestPage
+      .getByRole("radio", { name: "Handset", exact: true })
+      .click();
 
     // dismiss settings
     await guestPage.locator("#root").getByLabel("Settings").press("Escape");
diff --git a/src/room/InCallView.module.css b/src/room/InCallView.module.css
index 92f1fc7a..f5ba5d5a 100644
--- a/src/room/InCallView.module.css
+++ b/src/room/InCallView.module.css
@@ -113,9 +113,9 @@ Once we exceed 500 we hide everything except the buttons.
     grid-template-areas: "buttons buttons buttons";
   }
 
-  .settingsLogoContainer {
+  /*.settingsLogoContainer {
     display: none;
-  }
+  }*/
 
   .layout {
     display: none !important;

From ed83672720415d812bc800a63f4af00de22fb8e0 Mon Sep 17 00:00:00 2001
From: Timo <16718859+toger5@users.noreply.github.com>
Date: Tue, 14 Apr 2026 17:43:05 +0200
Subject: [PATCH 06/14] Update src/room/InCallView.tsx

Co-authored-by: Robin <robin@robin.town>
---
 src/room/InCallView.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index cf445170..2b13e08f 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -683,6 +683,7 @@ export const InCallView: FC<InCallViewProps> = ({
     >
       <div className={styles.settingsLogoContainer}>
         {showControls &&
+          // Settings button is also shown in the app bar if present
           headerStyle !== HeaderStyle.AppBar &&
           layout.type !== "pip" && (
             <SettingsButton key="settings" onClick={openSettings} />

From a069d28f3adb5179171bc7e62b601b8a094d587e Mon Sep 17 00:00:00 2001
From: Timo K <toger5@hotmail.de>
Date: Tue, 14 Apr 2026 17:05:56 +0200
Subject: [PATCH 07/14] review: make appBar styling use IconButton (fix
 margins)

---
 src/AppBar.tsx          | 11 ++++-------
 src/button/Button.tsx   | 26 ++++++++++++++++----------
 src/room/InCallView.tsx |  2 +-
 3 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/AppBar.tsx b/src/AppBar.tsx
index 72ee9285..95cdb32b 100644
--- a/src/AppBar.tsx
+++ b/src/AppBar.tsx
@@ -16,7 +16,7 @@ import {
   useMemo,
   useState,
 } from "react";
-import { Button, Heading, Tooltip } from "@vector-im/compound-web";
+import { Button, Heading, IconButton, Tooltip } from "@vector-im/compound-web";
 import { CollapseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 import { useTranslation } from "react-i18next";
 
@@ -68,12 +68,9 @@ export const AppBar: FC<Props> = ({ children }) => {
         >
           <LeftNav>
             <Tooltip label={t("common.back")}>
-              <Button
-                kind={"tertiary"}
-                iconOnly
-                Icon={CollapseIcon}
-                onClick={onBackClick}
-              />
+              <IconButton onClick={onBackClick}>
+                <CollapseIcon />
+              </IconButton>
             </Tooltip>
           </LeftNav>
           {title && (
diff --git a/src/button/Button.tsx b/src/button/Button.tsx
index 407b74cb..16aa211c 100644
--- a/src/button/Button.tsx
+++ b/src/button/Button.tsx
@@ -8,7 +8,11 @@ Please see LICENSE in the repository root for full details.
 import { type ComponentPropsWithoutRef, type FC } from "react";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
-import { Button as CpdButton, Tooltip } from "@vector-im/compound-web";
+import {
+  Button as CpdButton,
+  IconButton,
+  Tooltip,
+} from "@vector-im/compound-web";
 import {
   MicOnSolidIcon,
   MicOffSolidIcon,
@@ -128,20 +132,22 @@ export const EndCallButton: FC<EndCallButtonProps> = ({
 
 interface SettingsButtonProps extends ComponentPropsWithoutRef<"button"> {
   size?: "sm" | "lg";
+  forAppBar?: boolean;
 }
 export const SettingsButton: FC<SettingsButtonProps> = (props) => {
   const { t } = useTranslation();
-
+  const Icon =
+    platform === "android" ? OverflowVerticalIcon : OverflowHorizontalIcon;
   return (
     <Tooltip label={t("common.settings")}>
-      <CpdButton
-        iconOnly
-        Icon={
-          platform === "android" ? OverflowVerticalIcon : OverflowHorizontalIcon
-        }
-        kind="tertiary"
-        {...props}
-      />
+      {!props.forAppBar && (
+        <CpdButton iconOnly Icon={Icon} kind="tertiary" {...props} />
+      )}
+      {props.forAppBar && (
+        <IconButton {...props}>
+          <Icon />
+        </IconButton>
+      )}
     </Tooltip>
   );
 };
diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index 2b13e08f..fee24597 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -645,7 +645,7 @@ export const InCallView: FC<InCallViewProps> = ({
   if (audioOutputButton) buttons.push(audioOutputButton);
 
   useAppBarSecondaryButton(
-    <SettingsButton key="settings" onClick={openSettings} />,
+    <SettingsButton forAppBar key="settings" onClick={openSettings} />,
   );
 
   buttons.push(

From f7e1fa74cdef2930c1e9b4dda884073733b20cd2 Mon Sep 17 00:00:00 2001
From: Timo K <toger5@hotmail.de>
Date: Tue, 14 Apr 2026 17:06:31 +0200
Subject: [PATCH 08/14] review: hide logo at 750px already

---
 src/room/InCallView.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/room/InCallView.module.css b/src/room/InCallView.module.css
index bfced404..85d3cdc1 100644
--- a/src/room/InCallView.module.css
+++ b/src/room/InCallView.module.css
@@ -102,7 +102,7 @@ Please see LICENSE in the repository root for full details.
 }
 
 /*First hide the logo*/
-@media (max-width: 660px) {
+@media (max-width: 750px) {
   .logo {
     display: none;
   }

From ab751e8c380a5c8634f5b3db4157c2c093a3b4ae Mon Sep 17 00:00:00 2001
From: Timo K <toger5@hotmail.de>
Date: Tue, 14 Apr 2026 17:44:31 +0200
Subject: [PATCH 09/14] review: smaller changes  - use correct button styles  -
 move overrides to options  - add flex-wrap: nowrap

---
 src/AppBar.tsx                           |  2 +-
 src/button/Button.tsx                    | 26 ++++++++++++++++--------
 src/room/InCallView.module.css           |  1 +
 src/room/InCallView.test.tsx             |  3 +--
 src/room/InCallView.tsx                  | 10 ++++++---
 src/room/LobbyView.tsx                   |  4 ++--
 src/state/CallViewModel/CallViewModel.ts |  1 +
 src/utils/test-viewmodel.ts              |  4 +---
 8 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/src/AppBar.tsx b/src/AppBar.tsx
index 95cdb32b..aaa7565e 100644
--- a/src/AppBar.tsx
+++ b/src/AppBar.tsx
@@ -16,7 +16,7 @@ import {
   useMemo,
   useState,
 } from "react";
-import { Button, Heading, IconButton, Tooltip } from "@vector-im/compound-web";
+import { Heading, IconButton, Tooltip } from "@vector-im/compound-web";
 import { CollapseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 import { useTranslation } from "react-i18next";
 
diff --git a/src/button/Button.tsx b/src/button/Button.tsx
index 16aa211c..1c207a41 100644
--- a/src/button/Button.tsx
+++ b/src/button/Button.tsx
@@ -130,9 +130,24 @@ export const EndCallButton: FC<EndCallButtonProps> = ({
   );
 };
 
+interface SettingsIconButtonProps extends ComponentPropsWithoutRef<"button"> {
+  kind?: "secondary" | "primary";
+}
+export const SettingsIconButton: FC<SettingsIconButtonProps> = (props) => {
+  const { t } = useTranslation();
+  const Icon =
+    platform === "android" ? OverflowVerticalIcon : OverflowHorizontalIcon;
+  return (
+    <Tooltip label={t("common.settings")}>
+      <IconButton {...props}>
+        <Icon />
+      </IconButton>
+    </Tooltip>
+  );
+};
+
 interface SettingsButtonProps extends ComponentPropsWithoutRef<"button"> {
   size?: "sm" | "lg";
-  forAppBar?: boolean;
 }
 export const SettingsButton: FC<SettingsButtonProps> = (props) => {
   const { t } = useTranslation();
@@ -140,14 +155,7 @@ export const SettingsButton: FC<SettingsButtonProps> = (props) => {
     platform === "android" ? OverflowVerticalIcon : OverflowHorizontalIcon;
   return (
     <Tooltip label={t("common.settings")}>
-      {!props.forAppBar && (
-        <CpdButton iconOnly Icon={Icon} kind="tertiary" {...props} />
-      )}
-      {props.forAppBar && (
-        <IconButton {...props}>
-          <Icon />
-        </IconButton>
-      )}
+      <CpdButton iconOnly Icon={Icon} kind="secondary" {...props} />
     </Tooltip>
   );
 };
diff --git a/src/room/InCallView.module.css b/src/room/InCallView.module.css
index 85d3cdc1..08fc89fb 100644
--- a/src/room/InCallView.module.css
+++ b/src/room/InCallView.module.css
@@ -79,6 +79,7 @@ Please see LICENSE in the repository root for full details.
   display: flex;
   gap: var(--cpd-space-4x);
   flex-direction: row;
+  flex-wrap: nowrap;
 }
 
 .logo {
diff --git a/src/room/InCallView.test.tsx b/src/room/InCallView.test.tsx
index 0c3be63b..f3f4e095 100644
--- a/src/room/InCallView.test.tsx
+++ b/src/room/InCallView.test.tsx
@@ -113,8 +113,7 @@ function createInCallView(args: CreateInCallViewArgs = {}): RenderResult & {
   const { vm, rtcSession } = getBasicCallViewModelEnvironment(
     [local, alice],
     undefined,
-    {},
-    args.mediaDevices,
+    { mediaDeviceOverride: args.mediaDevices },
   );
 
   rtcSession.joined = true;
diff --git a/src/room/InCallView.tsx b/src/room/InCallView.tsx
index fee24597..14ad25e8 100644
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -38,8 +38,8 @@ import {
   MicButton,
   VideoButton,
   ShareScreenButton,
-  SettingsButton,
   ReactionToggleButton,
+  SettingsIconButton,
 } from "../button";
 import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
 import { HeaderStyle, useUrlParams } from "../UrlParams";
@@ -645,7 +645,7 @@ export const InCallView: FC<InCallViewProps> = ({
   if (audioOutputButton) buttons.push(audioOutputButton);
 
   useAppBarSecondaryButton(
-    <SettingsButton forAppBar key="settings" onClick={openSettings} />,
+    <SettingsIconButton key="settings" onClick={openSettings} />,
   );
 
   buttons.push(
@@ -686,7 +686,11 @@ export const InCallView: FC<InCallViewProps> = ({
           // Settings button is also shown in the app bar if present
           headerStyle !== HeaderStyle.AppBar &&
           layout.type !== "pip" && (
-            <SettingsButton key="settings" onClick={openSettings} />
+            <SettingsIconButton
+              kind="secondary"
+              key="settings"
+              onClick={openSettings}
+            />
           )}
 
         {headerStyle !== "none" && logo}
diff --git a/src/room/LobbyView.tsx b/src/room/LobbyView.tsx
index 326b9c71..82d3b354 100644
--- a/src/room/LobbyView.tsx
+++ b/src/room/LobbyView.tsx
@@ -36,7 +36,7 @@ import { InviteButton } from "../button/InviteButton";
 import {
   EndCallButton,
   MicButton,
-  SettingsButton,
+  SettingsIconButton,
   VideoButton,
 } from "../button/Button";
 import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal";
@@ -228,7 +228,7 @@ export const LobbyView: FC<Props> = ({
         </div>
         <div className={inCallStyles.footer}>
           {recentsButtonInFooter && recentsButton}
-          <SettingsButton onClick={openSettings} />
+          <SettingsIconButton kind="secondary" onClick={openSettings} />
           <div className={inCallStyles.buttons}>
             <MicButton
               enabled={audioEnabled}
diff --git a/src/state/CallViewModel/CallViewModel.ts b/src/state/CallViewModel/CallViewModel.ts
index 711e5e7e..6461d939 100644
--- a/src/state/CallViewModel/CallViewModel.ts
+++ b/src/state/CallViewModel/CallViewModel.ts
@@ -172,6 +172,7 @@ export interface CallViewModelOptions {
   windowSize$?: Behavior<{ width: number; height: number }>;
   /** The version & compatibility mode of MatrixRTC that we should use. */
   matrixRTCMode$?: Behavior<MatrixRTCMode>;
+  mediaDeviceOverride?: MediaDevices;
 }
 
 // Do not play any sounds if the participant count has exceeded this
diff --git a/src/utils/test-viewmodel.ts b/src/utils/test-viewmodel.ts
index 8ab3c887..6d77a802 100644
--- a/src/utils/test-viewmodel.ts
+++ b/src/utils/test-viewmodel.ts
@@ -34,7 +34,6 @@ import {
   MockRTCSession,
   testScope,
 } from "./test";
-import { type MediaDevices } from "../state/MediaDevices";
 import { aliceRtcMember, localRtcMember } from "./test-fixtures";
 import { type RaisedHandInfo, type ReactionInfo } from "../reactions";
 import { constant } from "../state/Behavior";
@@ -133,7 +132,6 @@ export function getBasicCallViewModelEnvironment(
   members: RoomMember[],
   initialRtcMemberships: CallMembership[] = [localRtcMember, aliceRtcMember],
   callViewModelOptions: Partial<CallViewModelOptions> = {},
-  mediaDevicesOverride?: MediaDevices,
 ): {
   vm: CallViewModel;
   rtcMemberships$: BehaviorSubject<CallMembership[]>;
@@ -154,7 +152,7 @@ export function getBasicCallViewModelEnvironment(
     testScope(),
     rtcSession.asMockedSession(),
     matrixRoom,
-    mediaDevicesOverride ?? mockMediaDevices({}),
+    callViewModelOptions.mediaDeviceOverride ?? mockMediaDevices({}),
     mockMuteStates(),
     {
       encryptionSystem: { kind: E2eeType.PER_PARTICIPANT },

From 32823aef926bff3c76375ac76c681759ae43fe8f Mon Sep 17 00:00:00 2001
From: Timo K <toger5@hotmail.de>
Date: Tue, 14 Apr 2026 18:15:20 +0200
Subject: [PATCH 10/14] test and lints

---
 src/__snapshots__/AppBar.test.tsx.snap        | 32 +++++++++++--------
 src/button/Button.tsx                         | 26 +++++++--------
 .../__snapshots__/InCallView.test.tsx.snap    | 32 +++++++++++--------
 3 files changed, 49 insertions(+), 41 deletions(-)

diff --git a/src/__snapshots__/AppBar.test.tsx.snap b/src/__snapshots__/AppBar.test.tsx.snap
index 2dd608a6..7247c6b9 100644
--- a/src/__snapshots__/AppBar.test.tsx.snap
+++ b/src/__snapshots__/AppBar.test.tsx.snap
@@ -14,24 +14,28 @@ exports[`AppBar > renders 1`] = `
       >
         <button
           aria-labelledby="_r_0_"
-          class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
-          data-kind="tertiary"
-          data-size="lg"
+          class="_icon-button_1215g_8"
+          data-kind="primary"
           role="button"
+          style="--cpd-icon-button-size: 32px;"
           tabindex="0"
         >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
+          <div
+            class="_indicator-icon_147l5_17"
+            style="--cpd-icon-button-size: 100%;"
           >
-            <path
-              d="M12 11.034a1 1 0 0 0 .29.702l.005.005c.18.18.43.29.705.29h8a1 1 0 0 0 0-2h-5.586L22 3.445a1 1 0 0 0-1.414-1.414L14 8.617V3.031a1 1 0 1 0-2 0zm0 1.963a1 1 0 0 0-.29-.702l-.005-.004A1 1 0 0 0 11 12H3a1 1 0 1 0 0 2h5.586L2 20.586A1 1 0 1 0 3.414 22L10 15.414V21a1 1 0 0 0 2 0z"
-            />
-          </svg>
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 11.034a1 1 0 0 0 .29.702l.005.005c.18.18.43.29.705.29h8a1 1 0 0 0 0-2h-5.586L22 3.445a1 1 0 0 0-1.414-1.414L14 8.617V3.031a1 1 0 1 0-2 0zm0 1.963a1 1 0 0 0-.29-.702l-.005-.004A1 1 0 0 0 11 12H3a1 1 0 1 0 0 2h5.586L2 20.586A1 1 0 1 0 3.414 22L10 15.414V21a1 1 0 0 0 2 0z"
+              />
+            </svg>
+          </div>
         </button>
       </div>
       <div
diff --git a/src/button/Button.tsx b/src/button/Button.tsx
index 1c207a41..5dfa25b8 100644
--- a/src/button/Button.tsx
+++ b/src/button/Button.tsx
@@ -146,16 +146,16 @@ export const SettingsIconButton: FC<SettingsIconButtonProps> = (props) => {
   );
 };
 
-interface SettingsButtonProps extends ComponentPropsWithoutRef<"button"> {
-  size?: "sm" | "lg";
-}
-export const SettingsButton: FC<SettingsButtonProps> = (props) => {
-  const { t } = useTranslation();
-  const Icon =
-    platform === "android" ? OverflowVerticalIcon : OverflowHorizontalIcon;
-  return (
-    <Tooltip label={t("common.settings")}>
-      <CpdButton iconOnly Icon={Icon} kind="secondary" {...props} />
-    </Tooltip>
-  );
-};
+// interface SettingsButtonProps extends ComponentPropsWithoutRef<"button"> {
+//   size?: "sm" | "lg";
+// }
+// const SettingsButton: FC<SettingsButtonProps> = (props) => {
+//   const { t } = useTranslation();
+//   const Icon =
+//     platform === "android" ? OverflowVerticalIcon : OverflowHorizontalIcon;
+//   return (
+//     <Tooltip label={t("common.settings")}>
+//       <CpdButton iconOnly Icon={Icon} kind="secondary" {...props} />
+//     </Tooltip>
+//   );
+// };
diff --git a/src/room/__snapshots__/InCallView.test.tsx.snap b/src/room/__snapshots__/InCallView.test.tsx.snap
index 7ef7298b..dafc8564 100644
--- a/src/room/__snapshots__/InCallView.test.tsx.snap
+++ b/src/room/__snapshots__/InCallView.test.tsx.snap
@@ -170,24 +170,28 @@ exports[`InCallView > rendering > renders 1`] = `
       >
         <button
           aria-labelledby="_r_8_"
-          class="_button_13vu4_8 _has-icon_13vu4_60 _icon-only_13vu4_53"
-          data-kind="tertiary"
-          data-size="lg"
+          class="_icon-button_1215g_8"
+          data-kind="secondary"
           role="button"
+          style="--cpd-icon-button-size: 32px;"
           tabindex="0"
         >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
+          <div
+            class="_indicator-icon_147l5_17"
+            style="--cpd-icon-button-size: 100%;"
           >
-            <path
-              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-            />
-          </svg>
+            <svg
+              fill="currentColor"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+              />
+            </svg>
+          </div>
         </button>
         <div
           class="logo"

From e46be38869ac8d8b2ad33d3748f6693391329178 Mon Sep 17 00:00:00 2001
From: Timo K <toger5@hotmail.de>
Date: Wed, 15 Apr 2026 14:03:49 +0200
Subject: [PATCH 11/14] Make mediaDevices less confusing

---
 src/room/InCallView.test.tsx             | 9 +++++++--
 src/state/CallViewModel/CallViewModel.ts | 1 -
 src/utils/test-viewmodel.ts              | 6 +++---
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/room/InCallView.test.tsx b/src/room/InCallView.test.tsx
index f3f4e095..81554183 100644
--- a/src/room/InCallView.test.tsx
+++ b/src/room/InCallView.test.tsx
@@ -101,6 +101,7 @@ interface CreateInCallViewArgs {
 function createInCallView(args: CreateInCallViewArgs = {}): RenderResult & {
   rtcSession: MockRTCSession;
 } {
+  const mediaDevices = args.mediaDevices ?? mockMediaDevices({});
   const muteState = mockMuteStates();
   const livekitRoom = mockLivekitRoom(
     {
@@ -113,7 +114,11 @@ function createInCallView(args: CreateInCallViewArgs = {}): RenderResult & {
   const { vm, rtcSession } = getBasicCallViewModelEnvironment(
     [local, alice],
     undefined,
-    { mediaDeviceOverride: args.mediaDevices },
+    mediaDevices,
+    {
+      toggleScreensharing: () => {},
+      ...args.callViewModelOptions,
+    },
   );
 
   rtcSession.joined = true;
@@ -121,7 +126,7 @@ function createInCallView(args: CreateInCallViewArgs = {}): RenderResult & {
   const client = room.client;
   const renderResult = render(
     <BrowserRouter>
-      <MediaDevicesContext value={args.mediaDevices ?? mockMediaDevices({})}>
+      <MediaDevicesContext value={mediaDevices}>
         <ReactionsSenderProvider
           vm={vm}
           rtcSession={rtcSession.asMockedSession()}
diff --git a/src/state/CallViewModel/CallViewModel.ts b/src/state/CallViewModel/CallViewModel.ts
index 6461d939..711e5e7e 100644
--- a/src/state/CallViewModel/CallViewModel.ts
+++ b/src/state/CallViewModel/CallViewModel.ts
@@ -172,7 +172,6 @@ export interface CallViewModelOptions {
   windowSize$?: Behavior<{ width: number; height: number }>;
   /** The version & compatibility mode of MatrixRTC that we should use. */
   matrixRTCMode$?: Behavior<MatrixRTCMode>;
-  mediaDeviceOverride?: MediaDevices;
 }
 
 // Do not play any sounds if the participant count has exceeded this
diff --git a/src/utils/test-viewmodel.ts b/src/utils/test-viewmodel.ts
index 6d77a802..b5438371 100644
--- a/src/utils/test-viewmodel.ts
+++ b/src/utils/test-viewmodel.ts
@@ -34,6 +34,7 @@ import {
   MockRTCSession,
   testScope,
 } from "./test";
+import { type MediaDevices } from "../state/MediaDevices";
 import { aliceRtcMember, localRtcMember } from "./test-fixtures";
 import { type RaisedHandInfo, type ReactionInfo } from "../reactions";
 import { constant } from "../state/Behavior";
@@ -131,6 +132,7 @@ export function getBasicRTCSession(
 export function getBasicCallViewModelEnvironment(
   members: RoomMember[],
   initialRtcMemberships: CallMembership[] = [localRtcMember, aliceRtcMember],
+  mediaDevicesOverride?: MediaDevices,
   callViewModelOptions: Partial<CallViewModelOptions> = {},
 ): {
   vm: CallViewModel;
@@ -146,13 +148,11 @@ export function getBasicCallViewModelEnvironment(
   const handRaisedSubject$ = new BehaviorSubject({});
   const reactionsSubject$ = new BehaviorSubject({});
 
-  // const remoteParticipants$ = of([aliceParticipant]);
-
   const vm = createCallViewModel$(
     testScope(),
     rtcSession.asMockedSession(),
     matrixRoom,
-    callViewModelOptions.mediaDeviceOverride ?? mockMediaDevices({}),
+    mediaDevicesOverride ?? mockMediaDevices({}),
     mockMuteStates(),
     {
       encryptionSystem: { kind: E2eeType.PER_PARTICIPANT },

From 75fb89a98abfeb8fe974715f6cf3e994a515e2cb Mon Sep 17 00:00:00 2001
From: Timo K <toger5@hotmail.de>
Date: Wed, 15 Apr 2026 14:20:19 +0200
Subject: [PATCH 12/14] review: update styles + aria hidden

---
 src/AppBar.tsx        | 4 ++--
 src/button/Button.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/AppBar.tsx b/src/AppBar.tsx
index aaa7565e..86d150ee 100644
--- a/src/AppBar.tsx
+++ b/src/AppBar.tsx
@@ -68,8 +68,8 @@ export const AppBar: FC<Props> = ({ children }) => {
         >
           <LeftNav>
             <Tooltip label={t("common.back")}>
-              <IconButton onClick={onBackClick}>
-                <CollapseIcon />
+              <IconButton size="24px" onClick={onBackClick}>
+                <CollapseIcon aria-hidden />
               </IconButton>
             </Tooltip>
           </LeftNav>
diff --git a/src/button/Button.tsx b/src/button/Button.tsx
index 5dfa25b8..11834506 100644
--- a/src/button/Button.tsx
+++ b/src/button/Button.tsx
@@ -140,7 +140,7 @@ export const SettingsIconButton: FC<SettingsIconButtonProps> = (props) => {
   return (
     <Tooltip label={t("common.settings")}>
       <IconButton {...props}>
-        <Icon />
+        <Icon aria-hidden />
       </IconButton>
     </Tooltip>
   );

From f07bf5c520c9d05a748fb8a1a56160f5398f1284 Mon Sep 17 00:00:00 2001
From: Timo K <toger5@hotmail.de>
Date: Wed, 15 Apr 2026 14:26:25 +0200
Subject: [PATCH 13/14] fix lint

---
 src/room/CallEventAudioRenderer.test.tsx | 1 +
 src/room/InCallView.test.tsx             | 5 +----
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/room/CallEventAudioRenderer.test.tsx b/src/room/CallEventAudioRenderer.test.tsx
index 5d3eff5e..9ab64dfd 100644
--- a/src/room/CallEventAudioRenderer.test.tsx
+++ b/src/room/CallEventAudioRenderer.test.tsx
@@ -123,6 +123,7 @@ test("does not play a sound before the call is successful", () => {
   const { vm, rtcMemberships$ } = getBasicCallViewModelEnvironment(
     [local, alice],
     [localRtcMember],
+    undefined,
     { waitForCallPickup: true },
   );
   render(<CallEventAudioRenderer vm={vm} />);
diff --git a/src/room/InCallView.test.tsx b/src/room/InCallView.test.tsx
index 81554183..5ee8e288 100644
--- a/src/room/InCallView.test.tsx
+++ b/src/room/InCallView.test.tsx
@@ -115,10 +115,7 @@ function createInCallView(args: CreateInCallViewArgs = {}): RenderResult & {
     [local, alice],
     undefined,
     mediaDevices,
-    {
-      toggleScreensharing: () => {},
-      ...args.callViewModelOptions,
-    },
+    {},
   );
 
   rtcSession.joined = true;

From 71e389cdef921ea8499ca3c6869f2e5a270c5049 Mon Sep 17 00:00:00 2001
From: Timo K <toger5@hotmail.de>
Date: Wed, 15 Apr 2026 14:45:53 +0200
Subject: [PATCH 14/14] unit test snapshots

---
 src/__snapshots__/AppBar.test.tsx.snap          | 3 ++-
 src/room/__snapshots__/InCallView.test.tsx.snap | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/__snapshots__/AppBar.test.tsx.snap b/src/__snapshots__/AppBar.test.tsx.snap
index 7247c6b9..0df18767 100644
--- a/src/__snapshots__/AppBar.test.tsx.snap
+++ b/src/__snapshots__/AppBar.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`AppBar > renders 1`] = `
           class="_icon-button_1215g_8"
           data-kind="primary"
           role="button"
-          style="--cpd-icon-button-size: 32px;"
+          style="--cpd-icon-button-size: 24px;"
           tabindex="0"
         >
           <div
@@ -25,6 +25,7 @@ exports[`AppBar > renders 1`] = `
             style="--cpd-icon-button-size: 100%;"
           >
             <svg
+              aria-hidden="true"
               fill="currentColor"
               height="1em"
               viewBox="0 0 24 24"
diff --git a/src/room/__snapshots__/InCallView.test.tsx.snap b/src/room/__snapshots__/InCallView.test.tsx.snap
index dafc8564..955c061e 100644
--- a/src/room/__snapshots__/InCallView.test.tsx.snap
+++ b/src/room/__snapshots__/InCallView.test.tsx.snap
@@ -181,6 +181,7 @@ exports[`InCallView > rendering > renders 1`] = `
             style="--cpd-icon-button-size: 100%;"
           >
             <svg
+              aria-hidden="true"
               fill="currentColor"
               height="1em"
               viewBox="0 0 24 24"