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

apps/web/playwright/e2e/left-panel/room-list-panel/room-list-collapse.spec.ts

@@ -13,6 +13,7 @@ import type { Locator, Page } from "playwright-core";
 test.describe("Collapsible Room list", () => {
     test.use({
         displayName: "Alice",
+        lockLeftPanelWidth: false,
     });
 
     test.beforeEach(async ({ page, app, user }) => {

apps/web/playwright/e2e/left-panel/room-list-panel/room-list-panel.spec.ts

@@ -36,9 +36,12 @@ test.describe("Room list panel", () => {
         await expect(roomListView).toMatchScreenshot("room-list-panel.png");
     });
 
-    test("should respond to small screen sizes", { tag: "@screenshot" }, async ({ page }) => {
-        await page.setViewportSize({ width: 575, height: 600 });
-        const roomListPanel = getRoomListView(page);
-        await expect(roomListPanel).toMatchScreenshot("room-list-panel-smallscreen.png");
+    test.describe("small screen", () => {
+        test.use({ lockLeftPanelWidth: false });
+        test("should respond to small screen sizes", { tag: "@screenshot" }, async ({ page }) => {
+            await page.setViewportSize({ width: 575, height: 600 });
+            const roomListPanel = getRoomListView(page);
+            await expect(roomListPanel).toMatchScreenshot("room-list-panel-smallscreen.png");
+        });
     });
 });