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 1/4] 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 2/4] 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 3/4] 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 4/4] 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 },