From f6e919021ad91f4f24d2456f6c6278921158034b Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Mon, 20 May 2024 18:08:50 +0200 Subject: [PATCH] Fix E2E icon display in room header (#12545) * Fix E2E icon display * Add e2e test --- playwright/e2e/room/room-header.spec.ts | 22 ++++++++++++++++++ .../encrypted-room-header-linux.png | Bin 0 -> 5505 bytes res/css/views/rooms/_LegacyRoomHeader.pcss | 5 ++++ 3 files changed, 27 insertions(+) create mode 100644 playwright/snapshots/room/room-header.spec.ts/encrypted-room-header-linux.png diff --git a/playwright/e2e/room/room-header.spec.ts b/playwright/e2e/room/room-header.spec.ts index a3c5e8c8bc..4008517d09 100644 --- a/playwright/e2e/room/room-header.spec.ts +++ b/playwright/e2e/room/room-header.spec.ts @@ -276,4 +276,26 @@ test.describe("Room Header", () => { await expect(header).toMatchScreenshot("room-header-with-apps-button-not-highlighted.png"); }); }); + + test.describe("with encryption", () => { + test("should render the E2E icon and the buttons", async ({ page, app, user }) => { + // Create an encrypted room + await app.client.createRoom({ + name: "Test Encrypted Room", + initial_state: [ + { + type: "m.room.encryption", + state_key: "", + content: { + algorithm: "m.megolm.v1.aes-sha2", + }, + }, + ], + }); + await app.viewRoomByName("Test Encrypted Room"); + + const header = page.locator(".mx_LegacyRoomHeader"); + await expect(header).toMatchScreenshot("encrypted-room-header.png"); + }); + }); }); diff --git a/playwright/snapshots/room/room-header.spec.ts/encrypted-room-header-linux.png b/playwright/snapshots/room/room-header.spec.ts/encrypted-room-header-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..6dced2e99093b4809375d86f6d95443fe6533b92 GIT binary patch literal 5505 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 literal 0 HcmV?d00001 diff --git a/res/css/views/rooms/_LegacyRoomHeader.pcss b/res/css/views/rooms/_LegacyRoomHeader.pcss index ce088f7deb..a570b0435a 100644 --- a/res/css/views/rooms/_LegacyRoomHeader.pcss +++ b/res/css/views/rooms/_LegacyRoomHeader.pcss @@ -65,6 +65,11 @@ limitations under the License. .mx_BetaCard_betaPill { margin-right: $spacing-8; } + + /* The container of E2EIcon in the legacy header needs to have its height set */ + & > span { + height: 100%; + } } .mx_LegacyRoomHeader_name {