Fix buttons on the room header being compressed due to long room name (#10155)

This PR adds the flex declaration to mx_RoomHeader_button to prevent the buttons from being compressed due to a long room name, copying the whole declarations from mx_RightPanel_headerButton for reference.

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

cypress/e2e/create-room/create-room.spec.ts

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 The Matrix.org Foundation C.I.C.
+Copyright 2022-2023 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -61,4 +61,31 @@ describe("Create Room", () => {
         cy.contains(".mx_RoomHeader_nametext", name);
         cy.contains(".mx_RoomHeader_topic", topic);
     });
+
+    it("should create a room with a long room name, which is displayed with ellipsis", () => {
+        let roomId: string;
+        const LONG_ROOM_NAME =
+            "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore " +
+            "et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut " +
+            "aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum " +
+            "dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui " +
+            "officia deserunt mollit anim id est laborum.";
+
+        cy.createRoom({ name: LONG_ROOM_NAME }).then((_roomId) => {
+            roomId = _roomId;
+            cy.visit("/#/room/" + roomId);
+        });
+
+        // Wait until the room name is set
+        cy.get(".mx_RoomHeader_nametext").contains("Lorem ipsum");
+
+        // Make sure size of buttons on RoomHeader (except .mx_RoomHeader_name) are specified
+        // and the buttons are not compressed
+        // TODO: use a same class name
+        cy.get(".mx_RoomHeader_button").should("have.css", "height", "32px").should("have.css", "width", "32px");
+        cy.get(".mx_HeaderButtons > .mx_RightPanel_headerButton")
+            .should("have.css", "height", "32px")
+            .should("have.css", "width", "32px");
+        cy.get(".mx_RoomHeader").percySnapshotElement("Room header with a long room name");
+    });
 });

res/css/structures/_RightPanel.pcss

@@ -48,6 +48,9 @@ limitations under the License.
     align-items: center;
 }
 
+/* See: mx_RoomHeader_button, of which this is a copy.
+ * TODO: factor out a common component to avoid this duplication.
+ */
 .mx_RightPanel_headerButton {
     cursor: pointer;
     flex: 0 0 auto;

res/css/views/rooms/_RoomHeader.pcss

@@ -191,12 +191,13 @@ limitations under the License.
 }
 
 .mx_RoomHeader_button {
-    position: relative;
+    cursor: pointer;
+    flex: 0 0 auto;
     margin-left: 1px;
     margin-right: 1px;
-    cursor: pointer;
     height: 32px;
     width: 32px;
+    position: relative;
     border-radius: 100%;
 
     &::before {