Stabilize screenshots

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

@@ -40,7 +40,7 @@ test.describe("Collapsible Room list", () => {
     }
 
     test("should be possible to expand/contract the room list", { tag: "@screenshot" }, async ({ page, app, user }) => {
-        await expect(page).toMatchScreenshot("room-list-collapse-default.png");
+        await expect(page).toMatchScreenshot("room-list-collapse-default.png", { unlockLeftPanelWidth: true });
         const leftPanelLocator = page.getByTestId("left-panel");
 
         // Contract the panel
@@ -68,7 +68,9 @@ test.describe("Collapsible Room list", () => {
             // Expect te separator to be shown
             const separator = page.getByRole("separator", { name: "Click or drag to expand" });
             await expect(separator).toBeInViewport();
-            await expect(page).toMatchScreenshot("room-list-collapse-fully-collapsed.png");
+            await expect(page).toMatchScreenshot("room-list-collapse-fully-collapsed.png", {
+                unlockLeftPanelWidth: true,
+            });
 
             // Should be possible to expand by clicking on the separator
             await separator.click();

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

@@ -45,6 +45,6 @@ test.describe("Room list panel", () => {
 
     test("should respond to small screen sizes", { tag: "@screenshot" }, async ({ page }) => {
         await page.setViewportSize({ width: 575, height: 600 });
-        await expect(page).toMatchScreenshot("room-list-panel-smallscreen.png");
+        await expect(page).toMatchScreenshot("room-list-panel-smallscreen.png", { unlockLeftPanelWidth: true });
     });
 });

apps/web/playwright/e2e/location/location.spec.ts

@@ -82,7 +82,7 @@ test.describe("Location sharing", { tag: "@no-firefox" }, () => {
                 "region", // XXX: ContextMenu managed=false does not provide a role.
             ]);
             await expect(axe).toHaveNoViolations();
-            await expect(menu).toMatchScreenshot("location-live-share-dialog.png");
+            await expect(menu).toMatchScreenshot("location-live-share-dialog.png", { unlockLeftPanelWidth: true });
         },
     );
 });

apps/web/playwright/element-web-test.ts

@@ -117,6 +117,7 @@ interface ExtendedToMatchScreenshotOptions extends ToMatchScreenshotOptions {
     showTooltips?: boolean;
     timeout?: number;
     hideJumpToBottomButton?: boolean;
+    unlockLeftPanelWidth?: boolean;
 }
 
 type Expectations = {
@@ -162,6 +163,14 @@ export const expect = baseExpect.extend<Expectations>({
             }
         `;
 
+        if (!options?.unlockLeftPanelWidth) {
+            css += `
+                #left-panel {
+                    flex: 0 0 369.6875px !important;
+                }
+            `;
+        }
+
         if (!options?.showTooltips) {
             css += `
                 [data-floating-ui-portal],

apps/web/src/viewmodels/structures/ResizerViewModel.ts

@@ -93,7 +93,7 @@ export class ResizerViewModel
     public onSeparatorClick = (): void => {
         if (this.panelHandle?.isCollapsed()) {
             const lastSize = SettingsStore.getValue("RoomList.panelSize");
-            this.panelHandle.resize(`${lastSize}%`);
+            this.panelHandle.resize(`${lastSize ?? 100}%`);
             this.autoCollapse.onLeftPanelResized();
         }
     };

apps/web/test/viewmodels/structures/auto-collapse/behaviours/CollapseOnWindowResizeBehaviour-test.ts

@@ -15,7 +15,8 @@ jest.useFakeTimers();
 describe("CollapseOnWindowResizeBehaviour", () => {
     it("Should collapse/expand the panel when the window is resized", () => {
         const collapseHandler = new MockCollapseHandler() as unknown as CollapseHandler;
-        const behaviour = new CollapseOnWindowResizeBehaviour(collapseHandler);
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const _behaviour = new CollapseOnWindowResizeBehaviour(collapseHandler);
         // Making the window smaller should collapse the panel.
         UIStore.instance.emit(UI_EVENTS.WidthDecreased, 750);
         expect(collapseHandler.collapse).toHaveBeenCalledTimes(1);
@@ -52,7 +53,8 @@ describe("CollapseOnWindowResizeBehaviour", () => {
 
     it("should return correct shouldStartCollapsed", () => {
         const collapseHandler = new MockCollapseHandler();
-        const behaviour = new CollapseOnWindowResizeBehaviour(collapseHandler as unknown as CollapseHandler);
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const _behaviour = new CollapseOnWindowResizeBehaviour(collapseHandler as unknown as CollapseHandler);
         // When the window is smaller than 768px, start collapsed.
         UIStore.instance.windowWidth = 750;
         expect(CollapseOnWindowResizeBehaviour.shouldStartCollapsed()).toBe(true);