Fix misaligned cross in complete security dialog (#32614)

* Fix misaligned cross in complete security dialog

* It's not a dialog

* Need to wait for login to finish

* Add screenshot

* Move snapshot to thr right place

apps/web/playwright/e2e/crypto/complete-security.spec.ts

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import { test, expect } from "../../element-web-test";
-import { logIntoElement } from "./utils";
+import { createBot, logIntoElement } from "./utils";
 import { isDendrite } from "../../plugins/homeserver/dendrite";
 
 test.describe("Complete security", () => {
@@ -16,6 +16,17 @@ test.describe("Complete security", () => {
         displayName: "Jeff",
     });
 
+    test(
+        "Complete Security dialog appears correctly",
+        { tag: "@screenshot" },
+        async ({ page, credentials, homeserver }) => {
+            await createBot(page, homeserver, credentials, true);
+            await logIntoElement(page, credentials);
+            await expect(page.getByRole("heading", { name: "Confirm your identity" })).toBeVisible();
+            await expect(page.getByRole("main")).toMatchScreenshot("complete-security.png");
+        },
+    );
+
     test("should go straight to the welcome screen if we have no signed device", async ({
         page,
         homeserver,

apps/web/res/css/_common.pcss

@@ -511,6 +511,7 @@ legend {
     svg {
         width: inherit;
         height: inherit;
+        vertical-align: top;
         color: var(--cpd-color-icon-secondary);
     }
 }