New room list: rework spacing of room list item (#29965)

* feat: rework spacing of room list item

* test: update snapshot

* test(e2e): regenerate room list panel screenshots

* test(e2e): regenerate room list screenshots

* test(e2e): update filter screenshot

playwright/e2e/left-panel/room-list-panel/room-list-panel.spec.ts

@@ -30,6 +30,9 @@ test.describe("Room list panel", () => {
         for (let i = 0; i < 20; i++) {
             await app.client.createRoom({ name: `room${i}` });
         }
+
+        // focus the user menu to avoid to have hover decoration
+        await page.getByRole("button", { name: "User menu" }).focus();
     });
 
     test("should render the room list panel", { tag: "@screenshot" }, async ({ page, app, user }) => {

playwright/e2e/left-panel/room-list-panel/room-list.spec.ts

@@ -29,6 +29,9 @@ test.describe("Room list", () => {
     test.beforeEach(async ({ page, app, user }) => {
         // The notification toast is displayed above the search section
         await app.closeNotificationToast();
+
+        // focus the user menu to avoid to have hover decoration
+        await page.getByRole("button", { name: "User menu" }).focus();
     });
 
     test.describe("Room list", () => {
@@ -241,6 +244,10 @@ test.describe("Room list", () => {
         test("should be a public room", { tag: "@screenshot" }, async ({ page, app, user }) => {
             // @ts-ignore Visibility enum is not accessible
             await app.client.createRoom({ name: "public room", visibility: "public" });
+
+            // focus the user menu to avoid to have hover decoration
+            await page.getByRole("button", { name: "User menu" }).focus();
+
             const roomListView = getRoomList(page);
             const publicRoom = roomListView.getByRole("gridcell", { name: "public room" });
 
@@ -256,6 +263,10 @@ test.describe("Room list", () => {
 
             const roomListView = getRoomList(page);
             const videoRoom = roomListView.getByRole("gridcell", { name: "video room" });
+
+            // focus the user menu to avoid to have hover decoration
+            await page.getByRole("button", { name: "User menu" }).focus();
+
             await expect(videoRoom).toBeVisible();
             await expect(videoRoom).toMatchScreenshot("room-list-item-video.png");
         });
@@ -328,6 +339,10 @@ test.describe("Room list", () => {
             await page.getByRole("menuitemcheckbox", { name: "Show message previews" }).click();
 
             const roomId = await app.client.createRoom({ name: "activity" });
+
+            // focus the user menu to avoid to have hover decoration
+            await page.getByRole("button", { name: "User menu" }).focus();
+
             await app.client.inviteUser(roomId, bot.credentials.userId);
             await bot.joinRoom(roomId);
             await bot.sendMessage(roomId, "I am a robot. Beep.");
@@ -376,8 +391,8 @@ test.describe("Room list", () => {
             await room.getByRole("button", { name: "More Options" }).click();
             await page.getByRole("menuitem", { name: "mark as unread" }).click();
 
-            // Remove hover on the room list item
-            await roomListView.hover();
+            // focus the user menu to avoid to have hover decoration
+            await page.getByRole("button", { name: "User menu" }).focus();
 
             await expect(room).toMatchScreenshot("room-list-item-mark-as-unread.png");
         });