Add padding to room header icon (#29271)

* Add padding to room header icon * Add screenshot tests for room header icon * Add type to visibility import * Use visibility type * lint
element-hq · Feb 21, 2025 · 2e1798e · 2e1798e
1 parent 3470182
commit 2e1798e
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 0 deletions.
diff --git a/playwright/e2e/room/room-header.spec.ts b/playwright/e2e/room/room-header.spec.ts
@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { type Page } from "@playwright/test";
+import { type Visibility } from "matrix-js-sdk/src/matrix";
 
 import { test, expect } from "../../element-web-test";
 import { type ElementAppPage } from "../../pages/ElementAppPage";
@@ -85,6 +86,15 @@ test.describe("Room Header", () => {
                 await expect(header).toMatchScreenshot("room-header-long-name.png");
             },
         );
+
+        test("should render room header icon correctly", { tag: "@screenshot" }, async ({ page, app, user }) => {
+            await app.client.createRoom({ name: "Test Room", visibility: "public" as Visibility });
+            await app.viewRoomByName("Test Room");
+
+            const header = page.locator(".mx_RoomHeader");
+
+            await expect(header).toMatchScreenshot("room-header-with-icon.png");
+        });
     });
 
     test.describe("with a video room", () => {

diff --git a/playwright/snapshots/room/room-header.spec.ts/room-header-with-icon-linux.png b/playwright/snapshots/room/room-header.spec.ts/room-header-with-icon-linux.png
diff --git a/res/css/views/rooms/_RoomHeader.pcss b/res/css/views/rooms/_RoomHeader.pcss
@@ -59,6 +59,7 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_RoomHeader_icon {
     flex-shrink: 0;
+    padding: var(--cpd-space-1x);
 }
 
 .mx_RoomHeader .mx_FacePile {