From f6ef476f7905cc2b1f060f1a360b482e7546e682 Mon Sep 17 00:00:00 2001
From: Kerry <kerrya@element.io>
Date: Wed, 15 Nov 2023 11:20:21 +1300
Subject: [PATCH] Fix: Emoji cause topics being cut off in new room header
 (#11865)

* Order of buttons on the right should be Video Call, Voice Call, Threads, Facepile

* Fix 26326: Emoji cause topics being cut off in new room header
---
 res/css/views/rooms/_RoomHeader.pcss      |  5 +++++
 src/components/views/rooms/RoomHeader.tsx | 19 ++++++++++---------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss
index d0aaf39c4a..f094be8b86 100644
--- a/res/css/views/rooms/_RoomHeader.pcss
+++ b/res/css/views/rooms/_RoomHeader.pcss
@@ -55,6 +55,11 @@ limitations under the License.
     height: 0;
     opacity: 0;
     transition: all var(--transition-standard) ease 0.1s;
+    /* Emojis are rendered a bit bigger than text in the timeline
+        Make them compact/the same size as text here */
+    .mx_Emoji {
+        font-size: inherit;
+    }
 }
 
 .mx_RoomHeader:hover .mx_RoomHeader_topic {
diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx
index 04c3078a11..21a3694961 100644
--- a/src/components/views/rooms/RoomHeader.tsx
+++ b/src/components/views/rooms/RoomHeader.tsx
@@ -193,6 +193,15 @@ export default function RoomHeader({
                         </Tooltip>
                     );
                 })}
+                <Tooltip label={!videoCallDisabledReason ? _t("voip|video_call") : videoCallDisabledReason!}>
+                    <IconButton
+                        disabled={!!videoCallDisabledReason}
+                        aria-label={!videoCallDisabledReason ? _t("voip|video_call") : videoCallDisabledReason!}
+                        onClick={videoCallClick}
+                    >
+                        <VideoCallIcon />
+                    </IconButton>
+                </Tooltip>
                 {!useElementCallExclusively && (
                     <Tooltip label={!voiceCallDisabledReason ? _t("voip|voice_call") : voiceCallDisabledReason!}>
                         <IconButton
@@ -204,15 +213,7 @@ export default function RoomHeader({
                         </IconButton>
                     </Tooltip>
                 )}
-                <Tooltip label={!videoCallDisabledReason ? _t("voip|video_call") : videoCallDisabledReason!}>
-                    <IconButton
-                        disabled={!!videoCallDisabledReason}
-                        aria-label={!videoCallDisabledReason ? _t("voip|video_call") : videoCallDisabledReason!}
-                        onClick={videoCallClick}
-                    >
-                        <VideoCallIcon />
-                    </IconButton>
-                </Tooltip>
+
                 <Tooltip label={_t("common|threads")}>
                     <IconButton
                         indicator={notificationColorToIndicator(threadNotifications)}