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

* Move room header info button to right-most position Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Iterate Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2024-12-18 09:55:59 +00:00 · 2024-12-18 09:55:59 +00:00 · 95c879c9e5
parent cbc1838755
commit 95c879c9e5
21 changed files with 785 additions and 823 deletions
--- a/playwright/e2e/room/room-header.spec.ts
+++ b/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()) {
--- a/playwright/snapshots/room/room-header.spec.ts/room-header-linux.png
+++ b/playwright/snapshots/room/room-header.spec.ts/room-header-linux.png
--- a/playwright/snapshots/room/room-header.spec.ts/room-header-long-name-linux.png
+++ b/playwright/snapshots/room/room-header.spec.ts/room-header-long-name-linux.png
--- a/playwright/snapshots/room/room-header.spec.ts/room-header-video-room-linux.png
+++ b/playwright/snapshots/room/room-header.spec.ts/room-header-video-room-linux.png
--- a/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-and-messages-irc-layout-linux.png
+++ b/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-and-messages-irc-layout-linux.png
--- a/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-bubble-layout-linux.png
+++ b/playwright/snapshots/timeline/timeline.spec.ts/collapsed-gels-bubble-layout-linux.png
--- a/playwright/snapshots/timeline/timeline.spec.ts/configured-room-irc-layout-linux.png
+++ b/playwright/snapshots/timeline/timeline.spec.ts/configured-room-irc-layout-linux.png
--- a/playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png
+++ b/playwright/snapshots/timeline/timeline.spec.ts/event-line-inline-start-margin-irc-layout-linux.png
--- a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-bubble-layout-linux.png
+++ b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-bubble-layout-linux.png
--- a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-compact-modern-layout-linux.png
+++ b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-compact-modern-layout-linux.png
--- a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-irc-layout-linux.png
+++ b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-irc-layout-linux.png
--- a/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-modern-layout-linux.png
+++ b/playwright/snapshots/timeline/timeline.spec.ts/event-tiles-modern-layout-linux.png
--- a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png
+++ b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-and-messages-irc-layout-linux.png
--- a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png
+++ b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-bubble-layout-linux.png
--- a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png
+++ b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-emote-irc-layout-linux.png
--- a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png
+++ b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-irc-layout-linux.png
--- a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png
+++ b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-modern-layout-linux.png
--- a/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png
+++ b/playwright/snapshots/timeline/timeline.spec.ts/expanded-gels-redaction-placeholder-linux.png
--- a/src/components/views/rooms/RoomHeader.tsx
+++ b/src/components/views/rooms/RoomHeader.tsx
@ -310,7 +310,7 @@ export default function RoomHeader({
                        </BodyText>
                    </Box>
                </button>
-                <Flex align="center" gap="var(--cpd-space-2x)">
+
                {additionalButtons?.map((props) => {
                    const label = props.label();

@ -340,18 +340,6 @@ export default function RoomHeader({
                    </>
                )}

-                    <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>
-
                {showChatButton && <VideoRoomChatButton room={room} />}

                <Tooltip label={_t("common|threads")}>
@ -381,7 +369,19 @@ export default function RoomHeader({
                        </IconButton>
                    </Tooltip>
                )}
-                </Flex>
+
+                <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>
+
                {!isDirectMessage && (
                    <BodyText as="div" size="sm" weight="medium">
                        <FacePile
--- a/test/unit-tests/components/structures/snapshots/RoomView-test.tsx.snap
+++ b/test/unit-tests/components/structures/snapshots/RoomView-test.tsx.snap
@ -45,10 +45,6 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
          </div>
        </div>
      </button>
-      <div
-        class="mx_Flex"
-        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
-      >
      <button
        aria-disabled="false"
        aria-label="Video call"
@ -101,34 +97,9 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
          </svg>
        </div>
      </button>
-        <button
-          aria-label="Room info"
-          aria-labelledby=":rge:"
-          class="_icon-button_bh2qc_17"
-          role="button"
-          style="--cpd-icon-button-size: 32px;"
-          tabindex="0"
-        >
-          <div
-            class="_indicator-icon_133tf_26"
-            style="--cpd-icon-button-size: 100%;"
-          >
-            <svg
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
-              />
-            </svg>
-          </div>
-        </button>
      <button
        aria-label="Threads"
-          aria-labelledby=":rgj:"
+        aria-labelledby=":rge:"
        class="_icon-button_bh2qc_17"
        role="button"
        style="--cpd-icon-button-size: 32px;"
@ -151,7 +122,31 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
          </svg>
        </div>
      </button>
+      <button
+        aria-label="Room info"
+        aria-labelledby=":rgj:"
+        class="_icon-button_bh2qc_17"
+        role="button"
+        style="--cpd-icon-button-size: 32px;"
+        tabindex="0"
+      >
+        <div
+          class="_indicator-icon_133tf_26"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
+            />
+          </svg>
        </div>
+      </button>
      <div
        class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50"
      >
@ -263,10 +258,6 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
          </div>
        </div>
      </button>
-      <div
-        class="mx_Flex"
-        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
-      >
      <button
        aria-disabled="false"
        aria-label="Video call"
@ -319,34 +310,9 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
          </svg>
        </div>
      </button>
-        <button
-          aria-label="Room info"
-          aria-labelledby=":rhc:"
-          class="_icon-button_bh2qc_17"
-          role="button"
-          style="--cpd-icon-button-size: 32px;"
-          tabindex="0"
-        >
-          <div
-            class="_indicator-icon_133tf_26"
-            style="--cpd-icon-button-size: 100%;"
-          >
-            <svg
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
-              />
-            </svg>
-          </div>
-        </button>
      <button
        aria-label="Threads"
-          aria-labelledby=":rhh:"
+        aria-labelledby=":rhc:"
        class="_icon-button_bh2qc_17"
        role="button"
        style="--cpd-icon-button-size: 32px;"
@ -369,7 +335,31 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
          </svg>
        </div>
      </button>
+      <button
+        aria-label="Room info"
+        aria-labelledby=":rhh:"
+        class="_icon-button_bh2qc_17"
+        role="button"
+        style="--cpd-icon-button-size: 32px;"
+        tabindex="0"
+      >
+        <div
+          class="_indicator-icon_133tf_26"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
+            />
+          </svg>
        </div>
+      </button>
      <div
        class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50"
      >
@ -566,10 +556,6 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
          </div>
        </div>
      </button>
-      <div
-        class="mx_Flex"
-        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
-      >
      <button
        aria-disabled="false"
        aria-label="Video call"
@ -622,34 +608,9 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
          </svg>
        </div>
      </button>
-        <button
-          aria-label="Room info"
-          aria-labelledby=":rc2:"
-          class="_icon-button_bh2qc_17"
-          role="button"
-          style="--cpd-icon-button-size: 32px;"
-          tabindex="0"
-        >
-          <div
-            class="_indicator-icon_133tf_26"
-            style="--cpd-icon-button-size: 100%;"
-          >
-            <svg
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
-              />
-            </svg>
-          </div>
-        </button>
      <button
        aria-label="Threads"
-          aria-labelledby=":rc7:"
+        aria-labelledby=":rc2:"
        class="_icon-button_bh2qc_17"
        role="button"
        style="--cpd-icon-button-size: 32px;"
@ -672,7 +633,31 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
          </svg>
        </div>
      </button>
+      <button
+        aria-label="Room info"
+        aria-labelledby=":rc7:"
+        class="_icon-button_bh2qc_17"
+        role="button"
+        style="--cpd-icon-button-size: 32px;"
+        tabindex="0"
+      >
+        <div
+          class="_indicator-icon_133tf_26"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
+            />
+          </svg>
        </div>
+      </button>
      <div
        class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50"
      >
@ -946,10 +931,6 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
          </div>
        </div>
      </button>
-      <div
-        class="mx_Flex"
-        style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
-      >
      <button
        aria-disabled="false"
        aria-label="Video call"
@ -1002,34 +983,9 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
          </svg>
        </div>
      </button>
-        <button
-          aria-label="Room info"
-          aria-labelledby=":re8:"
-          class="_icon-button_bh2qc_17"
-          role="button"
-          style="--cpd-icon-button-size: 32px;"
-          tabindex="0"
-        >
-          <div
-            class="_indicator-icon_133tf_26"
-            style="--cpd-icon-button-size: 100%;"
-          >
-            <svg
-              fill="currentColor"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
-              />
-            </svg>
-          </div>
-        </button>
      <button
        aria-label="Threads"
-          aria-labelledby=":red:"
+        aria-labelledby=":re8:"
        class="_icon-button_bh2qc_17"
        role="button"
        style="--cpd-icon-button-size: 32px;"
@ -1052,7 +1008,31 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
          </svg>
        </div>
      </button>
+      <button
+        aria-label="Room info"
+        aria-labelledby=":red:"
+        class="_icon-button_bh2qc_17"
+        role="button"
+        style="--cpd-icon-button-size: 32px;"
+        tabindex="0"
+      >
+        <div
+          class="_indicator-icon_133tf_26"
+          style="--cpd-icon-button-size: 100%;"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
+            />
+          </svg>
        </div>
+      </button>
      <div
        class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50"
      >
@ -1334,10 +1314,6 @@ exports[`RoomView should not display the timeline when the room encryption is lo
              </div>
            </div>
          </button>
-          <div
-            class="mx_Flex"
-            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
-          >
          <button
            aria-disabled="true"
            aria-label="There's no one here to call"
@ -1390,34 +1366,9 @@ exports[`RoomView should not display the timeline when the room encryption is lo
              </svg>
            </div>
          </button>
-            <button
-              aria-label="Room info"
-              aria-labelledby=":r2m:"
-              class="_icon-button_bh2qc_17"
-              role="button"
-              style="--cpd-icon-button-size: 32px;"
-              tabindex="0"
-            >
-              <div
-                class="_indicator-icon_133tf_26"
-                style="--cpd-icon-button-size: 100%;"
-              >
-                <svg
-                  fill="currentColor"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
-                  />
-                </svg>
-              </div>
-            </button>
          <button
            aria-label="Threads"
-              aria-labelledby=":r2r:"
+            aria-labelledby=":r2m:"
            class="_icon-button_bh2qc_17"
            role="button"
            style="--cpd-icon-button-size: 32px;"
@ -1440,7 +1391,31 @@ exports[`RoomView should not display the timeline when the room encryption is lo
              </svg>
            </div>
          </button>
+          <button
+            aria-label="Room info"
+            aria-labelledby=":r2r:"
+            class="_icon-button_bh2qc_17"
+            role="button"
+            style="--cpd-icon-button-size: 32px;"
+            tabindex="0"
+          >
+            <div
+              class="_indicator-icon_133tf_26"
+              style="--cpd-icon-button-size: 100%;"
+            >
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
+                />
+              </svg>
            </div>
+          </button>
          <div
            class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50"
          >
@ -1545,10 +1520,6 @@ exports[`RoomView should not display the timeline when the room encryption is lo
              </div>
            </div>
          </button>
-          <div
-            class="mx_Flex"
-            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
-          >
          <button
            aria-disabled="true"
            aria-label="There's no one here to call"
@ -1601,34 +1572,9 @@ exports[`RoomView should not display the timeline when the room encryption is lo
              </svg>
            </div>
          </button>
-            <button
-              aria-label="Room info"
-              aria-labelledby=":r2m:"
-              class="_icon-button_bh2qc_17"
-              role="button"
-              style="--cpd-icon-button-size: 32px;"
-              tabindex="0"
-            >
-              <div
-                class="_indicator-icon_133tf_26"
-                style="--cpd-icon-button-size: 100%;"
-              >
-                <svg
-                  fill="currentColor"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
-                  />
-                </svg>
-              </div>
-            </button>
          <button
            aria-label="Threads"
-              aria-labelledby=":r2r:"
+            aria-labelledby=":r2m:"
            class="_icon-button_bh2qc_17"
            role="button"
            style="--cpd-icon-button-size: 32px;"
@ -1651,7 +1597,31 @@ exports[`RoomView should not display the timeline when the room encryption is lo
              </svg>
            </div>
          </button>
+          <button
+            aria-label="Room info"
+            aria-labelledby=":r2r:"
+            class="_icon-button_bh2qc_17"
+            role="button"
+            style="--cpd-icon-button-size: 32px;"
+            tabindex="0"
+          >
+            <div
+              class="_indicator-icon_133tf_26"
+              style="--cpd-icon-button-size: 100%;"
+            >
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
+                />
+              </svg>
            </div>
+          </button>
          <div
            class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50"
          >
@ -1929,38 +1899,9 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
              </div>
            </div>
          </button>
-          <div
-            class="mx_Flex"
-            style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
-          >
-            <button
-              aria-label="Room info"
-              aria-labelledby=":r7c:"
-              class="_icon-button_bh2qc_17"
-              role="button"
-              style="--cpd-icon-button-size: 32px;"
-              tabindex="0"
-            >
-              <div
-                class="_indicator-icon_133tf_26"
-                style="--cpd-icon-button-size: 100%;"
-              >
-                <svg
-                  fill="currentColor"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
-                  />
-                </svg>
-              </div>
-            </button>
          <button
            aria-label="Chat"
-              aria-labelledby=":r7h:"
+            aria-labelledby=":r7c:"
            class="_icon-button_bh2qc_17"
            role="button"
            style="--cpd-icon-button-size: 32px;"
@ -1985,7 +1926,7 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
          </button>
          <button
            aria-label="Threads"
-              aria-labelledby=":r7m:"
+            aria-labelledby=":r7h:"
            class="_icon-button_bh2qc_17"
            role="button"
            style="--cpd-icon-button-size: 32px;"
@ -2008,7 +1949,31 @@ exports[`RoomView video rooms should render joined video room view 1`] = `
              </svg>
            </div>
          </button>
+          <button
+            aria-label="Room info"
+            aria-labelledby=":r7m:"
+            class="_icon-button_bh2qc_17"
+            role="button"
+            style="--cpd-icon-button-size: 32px;"
+            tabindex="0"
+          >
+            <div
+              class="_indicator-icon_133tf_26"
+              style="--cpd-icon-button-size: 100%;"
+            >
+              <svg
+                fill="currentColor"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
+                />
+              </svg>
            </div>
+          </button>
          <div
            class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50"
          >
--- a/test/unit-tests/components/views/rooms/snapshots/RoomHeader-test.tsx.snap
+++ b/test/unit-tests/components/views/rooms/snapshots/RoomHeader-test.tsx.snap
@ -42,10 +42,6 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
        </div>
      </div>
    </button>
-    <div
-      class="mx_Flex"
-      style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
-    >
    <button
      aria-labelledby=":r16c:"
      class="_icon-button_bh2qc_17"
@ -96,34 +92,9 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
        </svg>
      </div>
    </button>
-      <button
-        aria-label="Room info"
-        aria-labelledby=":r16m:"
-        class="_icon-button_bh2qc_17"
-        role="button"
-        style="--cpd-icon-button-size: 32px;"
-        tabindex="0"
-      >
-        <div
-          class="_indicator-icon_133tf_26"
-          style="--cpd-icon-button-size: 100%;"
-        >
-          <svg
-            fill="currentColor"
-            height="1em"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
-            />
-          </svg>
-        </div>
-      </button>
    <button
      aria-label="Threads"
-        aria-labelledby=":r16r:"
+      aria-labelledby=":r16m:"
      class="_icon-button_bh2qc_17"
      role="button"
      style="--cpd-icon-button-size: 32px;"
@ -146,7 +117,31 @@ exports[`RoomHeader dm does not show the face pile for DMs 1`] = `
        </svg>
      </div>
    </button>
+    <button
+      aria-label="Room info"
+      aria-labelledby=":r16r:"
+      class="_icon-button_bh2qc_17"
+      role="button"
+      style="--cpd-icon-button-size: 32px;"
+      tabindex="0"
+    >
+      <div
+        class="_indicator-icon_133tf_26"
+        style="--cpd-icon-button-size: 100%;"
+      >
+        <svg
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16v-4a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 11a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 12v4c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-8c.283 0 .52-.096.713-.287A.967.967 0 0 0 13 8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 13a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
+          />
+        </svg>
      </div>
+    </button>
  </header>
 </DocumentFragment>
 `;