Fix long room address and name not being clipped on room info card and update _RoomSummaryCard.pcss (#10811)

* Handle a long room address and name with ellipsis on RoomSummaryCard

* Use a class selector for maintainability

Sort the selectors

Author: luixxiul

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<JQuery<HTMLElement>> => {
     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);
 

res/css/views/right_panel/_RoomSummaryCard.pcss

@@ -19,26 +19,26 @@ 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);
         }
 
         .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;
 

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -318,7 +318,13 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose })
                 />
             </div>
 
-            <RoomName room={room}>{(name) => <h1 title={name}>{name}</h1>}</RoomName>
+            <RoomName room={room}>
+                {(name) => (
+                    <h1 className="mx_RoomSummaryCard_roomName" title={name}>
+                        {name}
+                    </h1>
+                )}
+            </RoomName>
             <div className="mx_RoomSummaryCard_alias" title={alias}>
                 {alias}
             </div>

test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap

@@ -46,6 +46,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         />
       </div>
       <h1
+        class="mx_RoomSummaryCard_roomName"
         title="!room:domain.org"
       >
         !room:domain.org