Fix E2E icon display in room header

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");
+ });
+ });
 });

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 {