diff --git a/desktop/src/features/search/ui/TopbarSearch.tsx b/desktop/src/features/search/ui/TopbarSearch.tsx index 94d4388742..78c1aa0a91 100644 --- a/desktop/src/features/search/ui/TopbarSearch.tsx +++ b/desktop/src/features/search/ui/TopbarSearch.tsx @@ -56,7 +56,7 @@ const SEARCH_RESULT_LIMIT = 40; const EMPTY_UNREAD_CHANNEL_COUNTS: ReadonlyMap = new Map(), EMPTY_UNREAD_CHANNEL_IDS: ReadonlySet = new Set(); const SEARCH_SECTION_TITLE_CLASS = - "px-2.5 pb-1.5 pt-2 text-xs font-medium text-muted-foreground/70"; + "sticky top-0 z-10 bg-background px-2.5 pb-1.5 pt-2 text-xs font-medium text-muted-foreground/70"; const SEARCH_RESULT_SECTION_ORDER = [ "current-channel-messages", "channels", diff --git a/desktop/tests/e2e/smoke.spec.ts b/desktop/tests/e2e/smoke.spec.ts index a9d4b6010c..568719fbf6 100644 --- a/desktop/tests/e2e/smoke.spec.ts +++ b/desktop/tests/e2e/smoke.spec.ts @@ -471,6 +471,9 @@ test("global search prioritizes messages from the current channel", async ({ '[data-search-section="current-channel-messages"]', ); await expect(currentChannelSection).toContainText("In this conversation"); + await expect( + currentChannelSection.getByText("In this conversation", { exact: true }), + ).toHaveCSS("position", "sticky"); await expect(currentChannelSection).toContainText("Welcome to #general"); await expect( currentChannelSection.locator(".search-result-row").first(), @@ -597,6 +600,10 @@ test("global search exposes a larger scrollable result window", async ({ await expect(resultRows).toHaveCount(40); const resultList = page.getByTestId("search-results-list"); await expect(resultList).toBeVisible(); + const stickySectionTitle = page.getByText("In this conversation", { + exact: true, + }); + await expect(stickySectionTitle).toHaveCSS("position", "sticky"); await expect(page.getByTestId("search-current-channel-control")).toHaveCount( 0, ); @@ -608,6 +615,13 @@ test("global search exposes a larger scrollable result window", async ({ await resultList.evaluate((element) => { element.scrollTop = element.scrollHeight; }); + const [titleTop, listTop] = await Promise.all([ + stickySectionTitle.evaluate( + (element) => element.getBoundingClientRect().top, + ), + resultList.evaluate((element) => element.getBoundingClientRect().top), + ]); + expect(Math.abs(titleTop - listTop)).toBeLessThanOrEqual(1); await resultList.evaluate((element) => { element.scrollTop = 0; });