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] 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(