diff --git a/cypress/e2e/right-panel/right-panel.spec.ts b/cypress/e2e/right-panel/right-panel.spec.ts index 733eb3c78fa..7af722515af 100644 --- a/cypress/e2e/right-panel/right-panel.spec.ts +++ b/cypress/e2e/right-panel/right-panel.spec.ts @@ -20,8 +20,16 @@ import { HomeserverInstance } from "../../plugins/utils/homeserver"; import Chainable = Cypress.Chainable; const ROOM_NAME = "Test room"; +const ROOM_NAME_LONG = + "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."; const SPACE_NAME = "Test space"; const NAME = "Alice"; +const ROOM_ADDRESS_LONG = + "loremIpsumDolorSitAmetConsecteturAdipisicingElitSedDoEiusmodTemporIncididuntUtLaboreEtDoloreMagnaAliqua"; const getMemberTileByName = (name: string): Chainable> => { return cy.get(`.mx_EntityTile, [title="${name}"]`); @@ -58,6 +66,31 @@ describe("RightPanel", () => { }); describe("in rooms", () => { + it("should handle long room address and long room name", () => { + cy.createRoom({ name: ROOM_NAME_LONG }); + viewRoomSummaryByName(ROOM_NAME_LONG); + + cy.openRoomSettings(); + + // Set a local room address + cy.findByTestId("local-address-fieldset").within(() => { + cy.get(".mx_AliasSettings_localAddresses").click(); + cy.findByLabelText("Room address").type(ROOM_ADDRESS_LONG); + cy.findByRole("button", { name: "Add" }).click(); + }); + + cy.closeDialog(); + + // Close and reopen the right panel to render the room address + cy.findByRole("button", { name: "Room info" }).click(); + cy.get(".mx_RightPanel").should("not.exist"); + cy.findByRole("button", { name: "Room info" }).click(); + + cy.get(".mx_RightPanel").percySnapshotElement("RoomSummaryCard - with a room name and a local address", { + widths: [264], // Emulate the UI. The value is based on minWidth specified on MainSplit.tsx + }); + }); + it("should handle clicking add widgets", () => { viewRoomSummaryByName(ROOM_NAME); diff --git a/res/css/views/right_panel/_RoomSummaryCard.pcss b/res/css/views/right_panel/_RoomSummaryCard.pcss index d25f5c09b17..b23500fdfa8 100644 --- a/res/css/views/right_panel/_RoomSummaryCard.pcss +++ b/res/css/views/right_panel/_RoomSummaryCard.pcss @@ -19,7 +19,16 @@ limitations under the License. text-align: center; margin-top: $spacing-20; - h1 { + .mx_RoomSummaryCard_roomName, + .mx_RoomSummaryCard_alias { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + white-space: pre-wrap; + overflow: hidden; + } + + .mx_RoomSummaryCard_roomName { margin: $spacing-12 0 $spacing-4; font-weight: var(--font-semi-bold); } @@ -27,18 +36,9 @@ limitations under the License. .mx_RoomSummaryCard_alias { font-size: $font-13px; color: $secondary-content; - overflow: hidden; text-overflow: ellipsis; } - h1, - .mx_RoomSummaryCard_alias { - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - white-space: pre-wrap; - } - .mx_RoomSummaryCard_avatar { display: inline-flex; diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx index 860a58df024..4e69d7ccce2 100644 --- a/src/components/views/right_panel/RoomSummaryCard.tsx +++ b/src/components/views/right_panel/RoomSummaryCard.tsx @@ -318,7 +318,13 @@ const RoomSummaryCard: React.FC = ({ room, permalinkCreator, onClose }) /> - {(name) =>

{name}

}
+ + {(name) => ( +

+ {name} +

+ )} +
{alias}
diff --git a/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap b/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap index b093645716e..bae13c3caa2 100644 --- a/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap +++ b/test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap @@ -46,6 +46,7 @@ exports[` renders the room summary 1`] = ` />

!room:domain.org