Stabilize playwright tests by making the left panel constant width (#33451)

* Move css injection to panel.ts

- Inject css on event

* Upgrade package

* Fix playwright tests

* Remove RR instead of masking it

* Fix wrong import

* Fix playwright tests

* Fix more playwright tests

* Catch error and add comment

packages/playwright-common/src/fixtures/panel.ts

@@ -0,0 +1,48 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+import type { Page } from "playwright-core";
+import { test as base } from "./services.js";
+
+/**
+ * This is the width the panel by default.
+ * Rounding this number to a whole number would mean updating a whole
+ * bunch of screenshots.
+ */
+const LEFT_PANEL_WIDTH = "369.6875px";
+
+export const test = base.extend<{
+    /**
+     * Whether the left panel should have its width fixed.
+     * This is done because the library that we use for rendering collapsible
+     * panels uses math to calculate the width which can sometimes leads to +/-1px
+     * difference. While this does not matter to the user, it can lead to screenshot
+     * tests failing.
+     * Defaults to true, should be set to false via {@link base.use} when you want to test the collapse
+     * behaviour.
+     */
+    lockLeftPanelWidth: boolean;
+}>({
+    lockLeftPanelWidth: true,
+    page: async ({ lockLeftPanelWidth, page }, use) => {
+        const listener = async (page: Page) => {
+            try {
+                await page.addStyleTag({
+                    content: `
+                        #left-panel {
+                            flex: 0 0 ${LEFT_PANEL_WIDTH} !important;
+                        }
+                `,
+                });
+            } catch (e) {
+                console.error("Failed to add style tag to stabilize left panel", e);
+            }
+        };
+        if (lockLeftPanelWidth) page.on("load", listener);
+        await use(page);
+        if (lockLeftPanelWidth) page.off("load", listener);
+    },
+});

packages/playwright-common/src/fixtures/user.ts

@@ -12,7 +12,7 @@ import { sample, uniqueId } from "lodash-es";
 // We want to avoid using `mergeTests` in index.ts because it drops useful type
 // information about the fixtures. Instead, we add `services` into our fixture
 // suite by using its `test` as a base, so that there is a linear hierarchy.
-import { test as base } from "./services.js";
+import { test as base } from "./panel.js";
 import { type Credentials } from "../utils/api.js";
 
 /** Adds an initScript to the given page which will populate localStorage appropriately so that Element will use the given credentials. */

packages/playwright-common/src/index.ts

@@ -84,18 +84,8 @@ export const test = base.extend<TestFixtures>({
     config: async ({}, use) => use({}),
     labsFlags: async ({}, use) => use([]),
     disablePresence: async ({}, use) => use(false),
-    lockLeftPanelWidth: true,
-    page: async ({ homeserver, context, page, config, labsFlags, disablePresence, lockLeftPanelWidth }, use) => {
+    page: async ({ homeserver, context, page, config, labsFlags, disablePresence }, use) => {
         await routeConfigJson(context, homeserver.baseUrl, config, labsFlags, disablePresence);
-        if (lockLeftPanelWidth) {
-            await page.addStyleTag({
-                content: `
-                        #left-panel {
-                            flex: 0 0 369.6875px !important;
-                        }
-                `,
-            });
-        }
         await use(page);
     },
 });

packages/shared-components/package.json

@@ -78,7 +78,7 @@
         "matrix-web-i18n": "catalog:",
         "react-blurhash": "^0.3.0",
         "react-merge-refs": "^3.0.2",
-        "react-resizable-panels": "4.7.2",
+        "react-resizable-panels": "4.9.0",
         "react-virtuoso": "^4.14.0",
         "temporal-polyfill": "^0.3.0"
     },