fix(desktop): keep search section headers visible

Co-authored-by: Fizz <f2701065ae39f701786d464e4c06b5fbc2fa3dda9f31f9439b3d077d8fd7fb0d@buzz.block.builderlab.xyz>
Signed-off-by: Fizz <f2701065ae39f701786d464e4c06b5fbc2fa3dda9f31f9439b3d077d8fd7fb0d@buzz.block.builderlab.xyz>
Co-authored-by: Arjun Mahanti <arjun@squareup.com>
Signed-off-by: Arjun Mahanti <arjun@squareup.com>
This commit is contained in:
Fizz
2026-08-24 13:23:59 -04:00
committed by Arjun Mahanti
parent a523471ca5
commit 6cba7bbad1
2 changed files with 15 additions and 1 deletions

View File

@@ -56,7 +56,7 @@ const SEARCH_RESULT_LIMIT = 40;
const EMPTY_UNREAD_CHANNEL_COUNTS: ReadonlyMap<string, number> = new Map(),
EMPTY_UNREAD_CHANNEL_IDS: ReadonlySet<string> = 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",

View File

@@ -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;
});