Fix E2E icon display in room header (#12545)

* Fix E2E icon display

* Add e2e test

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 {