Move room header info button to right-most position (#28754)

* Move room header info button to right-most position

Signed-off-by: Michael Telatynski <[email protected]>

* Update screenshots

Signed-off-by: Michael Telatynski <[email protected]>

* Iterate

Signed-off-by: Michael Telatynski <[email protected]>

* Update snapshot

Signed-off-by: Michael Telatynski <[email protected]>

* Update screenshots

Signed-off-by: Michael Telatynski <[email protected]>

---------

Signed-off-by: Michael Telatynski <[email protected]>

playwright/e2e/room/room-header.spec.ts

@@ -71,7 +71,9 @@ test.describe("Room Header", () => {
 
                 // Assert the size of buttons on RoomHeader are specified and the buttons are not compressed
                 // Note these assertions do not check the size of mx_LegacyRoomHeader_name button
-                const buttons = header.locator(".mx_Flex").getByRole("button");
+                const buttons = header.getByRole("button").filter({
+                    has: page.locator("svg"),
+                });
                 await expect(buttons).toHaveCount(5);
 
                 for (const button of await buttons.all()) {

src/components/views/rooms/RoomHeader.tsx

@@ -310,78 +310,78 @@ export default function RoomHeader({
                         </BodyText>
                     </Box>
                 </button>
-                <Flex align="center" gap="var(--cpd-space-2x)">
-                    {additionalButtons?.map((props) => {
-                        const label = props.label();
 
-                        return (
-                            <Tooltip label={label} key={props.id}>
-                                <IconButton
-                                    aria-label={label}
-                                    onClick={(event) => {
-                                        event.stopPropagation();
-                                        props.onClick();
-                                    }}
-                                >
-                                    {typeof props.icon === "function" ? props.icon() : props.icon}
-                                </IconButton>
-                            </Tooltip>
-                        );
-                    })}
+                {additionalButtons?.map((props) => {
+                    const label = props.label();
 
-                    {isViewingCall && <CallGuestLinkButton room={room} />}
-
-                    {hasActiveCallSession && !isConnectedToCall && !isViewingCall ? (
-                        joinCallButton
-                    ) : (
-                        <>
-                            {!isVideoRoom && videoCallButton}
-                            {!useElementCallExclusively && !isVideoRoom && voiceCallButton}
-                        </>
-                    )}
+                    return (
+                        <Tooltip label={label} key={props.id}>
+                            <IconButton
+                                aria-label={label}
+                                onClick={(event) => {
+                                    event.stopPropagation();
+                                    props.onClick();
+                                }}
+                            >
+                                {typeof props.icon === "function" ? props.icon() : props.icon}
+                            </IconButton>
+                        </Tooltip>
+                    );
+                })}
+
+                {isViewingCall && <CallGuestLinkButton room={room} />}
+
+                {hasActiveCallSession && !isConnectedToCall && !isViewingCall ? (
+                    joinCallButton
+                ) : (
+                    <>
+                        {!isVideoRoom && videoCallButton}
+                        {!useElementCallExclusively && !isVideoRoom && voiceCallButton}
+                    </>
+                )}
 
-                    <Tooltip label={_t("right_panel|room_summary_card|title")}>
+                {showChatButton && <VideoRoomChatButton room={room} />}
+
+                <Tooltip label={_t("common|threads")}>
+                    <IconButton
+                        indicator={notificationLevelToIndicator(threadNotifications)}
+                        onClick={(evt) => {
+                            evt.stopPropagation();
+                            RightPanelStore.instance.showOrHidePhase(RightPanelPhases.ThreadPanel);
+                            PosthogTrackers.trackInteraction("WebRoomHeaderButtonsThreadsButton", evt);
+                        }}
+                        aria-label={_t("common|threads")}
+                    >
+                        <ThreadsIcon />
+                    </IconButton>
+                </Tooltip>
+                {notificationsEnabled && (
+                    <Tooltip label={_t("notifications|enable_prompt_toast_title")}>
                         <IconButton
+                            indicator={notificationLevelToIndicator(globalNotificationState.level)}
                             onClick={(evt) => {
                                 evt.stopPropagation();
-                                RightPanelStore.instance.showOrHidePhase(RightPanelPhases.RoomSummary);
+                                RightPanelStore.instance.showOrHidePhase(RightPanelPhases.NotificationPanel);
                             }}
-                            aria-label={_t("right_panel|room_summary_card|title")}
+                            aria-label={_t("notifications|enable_prompt_toast_title")}
                         >
-                            <RoomInfoIcon />
+                            <NotificationsIcon />
                         </IconButton>
                     </Tooltip>
+                )}
 
-                    {showChatButton && <VideoRoomChatButton room={room} />}
+                <Tooltip label={_t("right_panel|room_summary_card|title")}>
+                    <IconButton
+                        onClick={(evt) => {
+                            evt.stopPropagation();
+                            RightPanelStore.instance.showOrHidePhase(RightPanelPhases.RoomSummary);
+                        }}
+                        aria-label={_t("right_panel|room_summary_card|title")}
+                    >
+                        <RoomInfoIcon />
+                    </IconButton>
+                </Tooltip>
 
-                    <Tooltip label={_t("common|threads")}>
-                        <IconButton
-                            indicator={notificationLevelToIndicator(threadNotifications)}
-                            onClick={(evt) => {
-                                evt.stopPropagation();
-                                RightPanelStore.instance.showOrHidePhase(RightPanelPhases.ThreadPanel);
-                                PosthogTrackers.trackInteraction("WebRoomHeaderButtonsThreadsButton", evt);
-                            }}
-                            aria-label={_t("common|threads")}
-                        >
-                            <ThreadsIcon />
-                        </IconButton>
-                    </Tooltip>
-                    {notificationsEnabled && (
-                        <Tooltip label={_t("notifications|enable_prompt_toast_title")}>
-                            <IconButton
-                                indicator={notificationLevelToIndicator(globalNotificationState.level)}
-                                onClick={(evt) => {
-                                    evt.stopPropagation();
-                                    RightPanelStore.instance.showOrHidePhase(RightPanelPhases.NotificationPanel);
-                                }}
-                                aria-label={_t("notifications|enable_prompt_toast_title")}
-                            >
-                                <NotificationsIcon />
-                            </IconButton>
-                        </Tooltip>
-                    )}
-                </Flex>
                 {!isDirectMessage && (
                     <BodyText as="div" size="sm" weight="medium">
                         <FacePile