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
matrix-org · Nov 14, 2023 · f6ef476 · f6ef476
1 parent eca08db
commit f6ef476
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git 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
@@ -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)}