diff --git a/apps/web/playwright/e2e/threads/threads.spec.ts b/apps/web/playwright/e2e/threads/threads.spec.ts index b2c1879350..520d22bf90 100644 --- a/apps/web/playwright/e2e/threads/threads.spec.ts +++ b/apps/web/playwright/e2e/threads/threads.spec.ts @@ -595,4 +595,49 @@ test.describe("Threads", () => { rightPanel.locator(".mx_EventTile").getByText("Hello again Mr. User in a thread"), ).not.toBeVisible(); }); + + test("should have a header the same height as the pinned message banner", async ({ page, app, user }) => { + // Create room + const roomId = await app.client.createRoom({}); + await page.goto("/#/room/" + roomId); + + // Send a message and pin it, so the pinned message banner is shown + const roomViewBody = page.locator(".mx_RoomView_body"); + const textbox = roomViewBody.getByRole("textbox", { name: "Send an unencrypted message…" }); + await textbox.fill("Hello Mr. Bot"); + await textbox.press("Enter"); + + const message = roomViewBody.locator(".mx_MTextBody").filter({ hasText: "Hello Mr. Bot" }); + await message.click({ button: "right" }); + await page.getByRole("menuitem", { name: "Pin", exact: true }).click(); + + const pinnedMessageBanner = page.getByTestId("pinned-message-banner"); + await expect(pinnedMessageBanner).toBeVisible(); + + // Reply in a thread, so the Threads panel header (Mark all as read + Show filter) is shown + const messageTile = roomViewBody + .locator(".mx_EventTile[data-scroll-tokens]") + .filter({ hasText: "Hello Mr. Bot" }); + await messageTile.hover(); + await messageTile.getByRole("button", { name: "Reply in thread" }).click(); + await expect(page.locator(".mx_ThreadView_timelinePanelWrapper")).toHaveCount(1); + + const threadPanel = page.locator(".mx_ThreadPanel"); + const threadTextbox = threadPanel.getByRole("textbox", { name: "Send an unencrypted message…" }); + await threadTextbox.fill("Hello Mr. User in a thread"); + await threadTextbox.press("Enter"); + await expect(threadPanel.locator(".mx_EventTile_last").getByText("Hello Mr. User in a thread")).toBeVisible(); + await threadPanel.getByTestId("base-card-close-button").click(); + + await page.locator(".mx_RoomHeader").getByRole("button", { name: "Threads" }).click(); + const threadPanelHeader = page.locator(".mx_ThreadPanelHeader"); + await expect(threadPanelHeader).toBeVisible(); + + // The two containers must be the same height so their bottom borders line up + // See https://github.com/element-hq/element-web/issues/34463 + const pinnedBannerBox = await pinnedMessageBanner.boundingBox(); + const threadHeaderBox = await threadPanelHeader.boundingBox(); + expect(threadHeaderBox?.height).toBe(pinnedBannerBox?.height); + await expect(threadPanelHeader).toHaveCSS("height", "64px"); + }); }); diff --git a/apps/web/playwright/snapshots/threads/threads.spec.ts/thread-panel-linux.png b/apps/web/playwright/snapshots/threads/threads.spec.ts/thread-panel-linux.png index c42007680d..ecc634cc5c 100644 Binary files a/apps/web/playwright/snapshots/threads/threads.spec.ts/thread-panel-linux.png and b/apps/web/playwright/snapshots/threads/threads.spec.ts/thread-panel-linux.png differ diff --git a/apps/web/res/css/views/right_panel/_ThreadPanel.pcss b/apps/web/res/css/views/right_panel/_ThreadPanel.pcss index d17b105f3e..85e3217c2e 100644 --- a/apps/web/res/css/views/right_panel/_ThreadPanel.pcss +++ b/apps/web/res/css/views/right_panel/_ThreadPanel.pcss @@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details. overflow: visible; .mx_ThreadPanelHeader { - height: 60px; + height: 64px; display: flex; box-sizing: border-box; padding: 16px;