From c6280dd875f84f4979eb484b655aeb66dd8bc9fa Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 31 Mar 2026 11:45:36 +0100 Subject: [PATCH 1/4] Debug screenshot --- modules/banner/element-web/e2e/banner.spec.ts | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/modules/banner/element-web/e2e/banner.spec.ts b/modules/banner/element-web/e2e/banner.spec.ts index eddc2d67e1..d60be88334 100644 --- a/modules/banner/element-web/e2e/banner.spec.ts +++ b/modules/banner/element-web/e2e/banner.spec.ts @@ -153,15 +153,7 @@ test.describe("Banner", () => { // Assert the sidebar looks as we expect await expect(axe).toHaveNoViolations(); await expect(sidebar).toMatchAriaSnapshot(); - await expect(page).toMatchScreenshot(`${type}_menu.png`, { - // We exclude this as we don't want to assert Element's styling, only our own - css: ` - #matrixchat { - opacity: 0; - background: orchid; - } - `, - }); + await expect(page).toMatchScreenshot(`${type}_menu.png`); }); await test.step("close menu", async () => { From 21396c25be99b4cb555b6ef9c64fe51887a8347d Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 31 Mar 2026 12:05:17 +0100 Subject: [PATCH 2/4] Iterate styles --- modules/banner/element-web/src/index.tsx | 2 ++ modules/banner/element-web/src/style.css | 15 +++++++++++++++ 2 files changed, 17 insertions(+) create mode 100644 modules/banner/element-web/src/style.css diff --git a/modules/banner/element-web/src/index.tsx b/modules/banner/element-web/src/index.tsx index 447fbf4969..f4196af06f 100644 --- a/modules/banner/element-web/src/index.tsx +++ b/modules/banner/element-web/src/index.tsx @@ -13,6 +13,7 @@ import Translations from "./translations.json"; import { ModuleConfig, CONFIG_KEY } from "./config"; import Banner from "./Banner"; import { name as ModuleName } from "../package.json"; +import style from "./style.css" with { type: "css" }; class BannerModule implements Module { public static readonly moduleApiVersion = "^1.0.0"; @@ -23,6 +24,7 @@ class BannerModule implements Module { public async load(): Promise { document.adoptedStyleSheets.push(compound); + document.adoptedStyleSheets.push(style); this.api.i18n.register(Translations); diff --git a/modules/banner/element-web/src/style.css b/modules/banner/element-web/src/style.css new file mode 100644 index 0000000000..6e573485f5 --- /dev/null +++ b/modules/banner/element-web/src/style.css @@ -0,0 +1,15 @@ +/* +Copyright 2026 Element Creations Ltd. + +SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +Please see LICENSE files in the repository root for full details. +*/ + +/* Styles to ensure the banner does not push the app out of the viewport */ +body { + display: flex; + flex-direction: column; +} +#matrixchat { + flex: 1; +} From f2608caf345c94ad2a3d344fa4085f71fd65ba04 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 31 Mar 2026 12:32:27 +0100 Subject: [PATCH 3/4] Iterate --- modules/banner/element-web/e2e/banner.spec.ts | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/modules/banner/element-web/e2e/banner.spec.ts b/modules/banner/element-web/e2e/banner.spec.ts index d60be88334..fd5021e95e 100644 --- a/modules/banner/element-web/e2e/banner.spec.ts +++ b/modules/banner/element-web/e2e/banner.spec.ts @@ -153,7 +153,22 @@ test.describe("Banner", () => { // Assert the sidebar looks as we expect await expect(axe).toHaveNoViolations(); await expect(sidebar).toMatchAriaSnapshot(); - await expect(page).toMatchScreenshot(`${type}_menu.png`); + await expect(page).toMatchScreenshot(`${type}_menu.png`, { + // We exclude this as we don't want to assert Element's styling, only our own + css: ` + #matrixchat { + opacity: 0; + background: orchid; + } + `, + }); + + // Verify that the #matrixchat root got shrunk to fit rather than exploding the viewport + const bodyBoundingBox = await page.locator("body").boundingBox(); + const rootBoundingBox = await page.locator("#matrixchat").boundingBox(); + const headerElement = await page.locator("#matrixchat").evaluate((e) => e.previousElementSibling); + const headerBoundingBox = headerElement?.getBoundingClientRect(); + expect(rootBoundingBox!.height + headerBoundingBox!.height).toEqual(bodyBoundingBox!.height); }); await test.step("close menu", async () => { From e772a104c23e8d70638d601217c8c3ef64b04329 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 31 Mar 2026 13:17:57 +0100 Subject: [PATCH 4/4] Iterate --- modules/banner/element-web/e2e/banner.spec.ts | 4 ++-- modules/banner/element-web/src/index.tsx | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/modules/banner/element-web/e2e/banner.spec.ts b/modules/banner/element-web/e2e/banner.spec.ts index fd5021e95e..edaf519492 100644 --- a/modules/banner/element-web/e2e/banner.spec.ts +++ b/modules/banner/element-web/e2e/banner.spec.ts @@ -166,8 +166,8 @@ test.describe("Banner", () => { // Verify that the #matrixchat root got shrunk to fit rather than exploding the viewport const bodyBoundingBox = await page.locator("body").boundingBox(); const rootBoundingBox = await page.locator("#matrixchat").boundingBox(); - const headerElement = await page.locator("#matrixchat").evaluate((e) => e.previousElementSibling); - const headerBoundingBox = headerElement?.getBoundingClientRect(); + const headerBoundingBox = await page.getByTestId("banner").boundingBox(); + expect(rootBoundingBox!.height).toBeLessThan(bodyBoundingBox!.height); expect(rootBoundingBox!.height + headerBoundingBox!.height).toEqual(bodyBoundingBox!.height); }); diff --git a/modules/banner/element-web/src/index.tsx b/modules/banner/element-web/src/index.tsx index f4196af06f..538fb8b3af 100644 --- a/modules/banner/element-web/src/index.tsx +++ b/modules/banner/element-web/src/index.tsx @@ -36,6 +36,7 @@ class BannerModule implements Module { } const div = document.createElement("div"); + div.dataset.testid = "banner"; this.api.rootNode.before(div); const root = this.api.createRoot(div);