diff --git a/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-collapse.spec.ts b/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-collapse.spec.ts index 2bf8b558dd..3ff1f926ca 100644 --- a/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-collapse.spec.ts +++ b/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(); diff --git a/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-panel.spec.ts b/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-panel.spec.ts index 5b4eb684d1..742a96f8a6 100644 --- a/apps/web/playwright/e2e/left-panel/room-list-panel/room-list-panel.spec.ts +++ b/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 }); }); }); diff --git a/apps/web/playwright/e2e/location/location.spec.ts b/apps/web/playwright/e2e/location/location.spec.ts index 5ea371b70d..bf6ef0ac0d 100644 --- a/apps/web/playwright/e2e/location/location.spec.ts +++ b/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 }); }, ); }); diff --git a/apps/web/playwright/element-web-test.ts b/apps/web/playwright/element-web-test.ts index f7c6f5b8e2..388a0855ce 100644 --- a/apps/web/playwright/element-web-test.ts +++ b/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({ } `; + if (!options?.unlockLeftPanelWidth) { + css += ` + #left-panel { + flex: 0 0 369.6875px !important; + } + `; + } + if (!options?.showTooltips) { css += ` [data-floating-ui-portal], diff --git a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-collapse.spec.ts/room-list-collapse-default-linux.png b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-collapse.spec.ts/room-list-collapse-default-linux.png index 4ae6fff8ba..634544ea99 100644 Binary files a/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-collapse.spec.ts/room-list-collapse-default-linux.png and b/apps/web/playwright/snapshots/left-panel/room-list-panel/room-list-collapse.spec.ts/room-list-collapse-default-linux.png differ diff --git a/apps/web/playwright/snapshots/room/room-status-bar.spec.ts/local-room-create-failed-linux.png b/apps/web/playwright/snapshots/room/room-status-bar.spec.ts/local-room-create-failed-linux.png index e604e01a1e..8e24d1a4da 100644 Binary files a/apps/web/playwright/snapshots/room/room-status-bar.spec.ts/local-room-create-failed-linux.png and b/apps/web/playwright/snapshots/room/room-status-bar.spec.ts/local-room-create-failed-linux.png differ diff --git a/apps/web/playwright/snapshots/room/room-status-bar.spec.ts/message-failed-linux.png b/apps/web/playwright/snapshots/room/room-status-bar.spec.ts/message-failed-linux.png index 673ab956d6..619b05c40b 100644 Binary files a/apps/web/playwright/snapshots/room/room-status-bar.spec.ts/message-failed-linux.png and b/apps/web/playwright/snapshots/room/room-status-bar.spec.ts/message-failed-linux.png differ diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-bubble-layout-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-bubble-layout-linux.png index 7924725ead..1c8983a4fa 100644 Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-bubble-layout-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-bubble-layout-linux.png differ diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-irc-layout-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-irc-layout-linux.png index e59c59796b..75ebfcdd93 100644 Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-irc-layout-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-irc-layout-linux.png differ diff --git a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-modern-layout-linux.png b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-modern-layout-linux.png index cfd7db0fdb..a2618df829 100644 Binary files a/apps/web/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-modern-layout-linux.png and b/apps/web/playwright/snapshots/timeline/timeline.spec.ts/long-strings-with-reply-modern-layout-linux.png differ diff --git a/apps/web/src/viewmodels/structures/ResizerViewModel.ts b/apps/web/src/viewmodels/structures/ResizerViewModel.ts index ff58f14812..7d37d82e11 100644 --- a/apps/web/src/viewmodels/structures/ResizerViewModel.ts +++ b/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(); } }; diff --git a/apps/web/test/viewmodels/structures/auto-collapse/behaviours/CollapseOnWindowResizeBehaviour-test.ts b/apps/web/test/viewmodels/structures/auto-collapse/behaviours/CollapseOnWindowResizeBehaviour-test.ts index 3ee3543df1..26da46ae2b 100644 --- a/apps/web/test/viewmodels/structures/auto-collapse/behaviours/CollapseOnWindowResizeBehaviour-test.ts +++ b/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);