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 {