Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

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

Merged
merged 8 commits into from
Mar 1, 2023
29 changes: 28 additions & 1 deletion cypress/e2e/create-room/create-room.spec.ts
Original file line number Diff line number Diff line change
@@ -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.
Expand Down Expand Up @@ -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");
});
});
3 changes: 3 additions & 0 deletions res/css/structures/_RightPanel.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
5 changes: 3 additions & 2 deletions res/css/views/rooms/_RoomHeader.pcss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down