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] 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 },