From da30b3069c77340a8bacc69658c2438b243a3191 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Fri, 20 Jan 2023 08:45:27 -0500
Subject: [PATCH] Tweak call lobby buttons to more closely match designs
 (#9943)

---
 res/css/views/voip/_CallView.pcss      | 4 ++--
 src/components/views/voip/CallView.tsx | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/res/css/views/voip/_CallView.pcss b/res/css/views/voip/_CallView.pcss
index 3e214a5b7b..72c5dc1839 100644
--- a/res/css/views/voip/_CallView.pcss
+++ b/res/css/views/voip/_CallView.pcss
@@ -160,7 +160,7 @@ limitations under the License.
                             content: "";
                             display: inline-block;
                             mask-image: url("$(res)/img/feather-customised/chevron-down.svg");
-                            mask-size: $size;
+                            mask-size: 20px;
                             mask-position: center;
                             background-color: $call-primary-content;
                             height: 100%;
@@ -181,7 +181,7 @@ limitations under the License.
                         .mx_CallView_deviceButton {
                             &.mx_CallView_deviceButton_audio::before {
                                 mask-image: url("$(res)/img/element-icons/Mic-off.svg");
-                                mask-size: 14px;
+                                mask-size: 18px;
                             }
 
                             &.mx_CallView_deviceButton_video::before {
diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx
index bcf0d10b92..a8437129a7 100644
--- a/src/components/views/voip/CallView.tsx
+++ b/src/components/views/voip/CallView.tsx
@@ -38,7 +38,7 @@ import IconizedContextMenu, {
     IconizedContextMenuOption,
     IconizedContextMenuOptionList,
 } from "../context_menus/IconizedContextMenu";
-import { aboveLeftOf, ContextMenuButton, useContextMenu } from "../../structures/ContextMenu";
+import { aboveRightOf, ContextMenuButton, useContextMenu } from "../../structures/ContextMenu";
 import { Alignment } from "../elements/Tooltip";
 import { ButtonEvent } from "../elements/AccessibleButton";
 import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
@@ -81,7 +81,7 @@ const DeviceButton: FC<DeviceButtonProps> = ({
     if (showMenu) {
         const buttonRect = buttonRef.current!.getBoundingClientRect();
         contextMenu = (
-            <IconizedContextMenu {...aboveLeftOf(buttonRect)} onFinished={closeMenu}>
+            <IconizedContextMenu {...aboveRightOf(buttonRect, undefined, 10)} onFinished={closeMenu}>
                 <IconizedContextMenuOptionList>
                     {devices.map((d) => (
                         <IconizedContextMenuOption key={d.deviceId} label={d.label} onClick={() => selectDevice(d)} />
@@ -101,6 +101,7 @@ const DeviceButton: FC<DeviceButtonProps> = ({
         >
             <AccessibleTooltipButton
                 className={`mx_CallView_deviceButton mx_CallView_deviceButton_${kind}`}
+                inputRef={buttonRef}
                 title={muted ? mutedTitle : unmutedTitle}
                 alignment={Alignment.Top}
                 onClick={toggle}
@@ -109,7 +110,6 @@ const DeviceButton: FC<DeviceButtonProps> = ({
             {devices.length > 1 ? (
                 <ContextMenuButton
                     className="mx_CallView_deviceListButton"
-                    inputRef={buttonRef}
                     onClick={openMenu}
                     isExpanded={showMenu}
                     label={deviceListLabel}