Merge pull request #233 from element-hq/t3chguy/fix-banner

modules/banner/element-web/e2e/banner.spec.ts

@@ -162,6 +162,13 @@ 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 headerBoundingBox = await page.getByTestId("banner").boundingBox();
+                    expect(rootBoundingBox!.height).toBeLessThan(bodyBoundingBox!.height);
+                    expect(rootBoundingBox!.height + headerBoundingBox!.height).toEqual(bodyBoundingBox!.height);
                 });
 
                 await test.step("close menu", async () => {

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<void> {
         document.adoptedStyleSheets.push(compound);
+        document.adoptedStyleSheets.push(style);
 
         this.api.i18n.register(Translations);
 
@@ -34,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);

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