From 7d9166ea4004e9b2f6f58f27912ca64328d55cf7 Mon Sep 17 00:00:00 2001 From: Tianyi Cui <53024+tianyicui@users.noreply.github.com> Date: Thu, 17 Sep 2026 09:37:14 +0800 Subject: [PATCH] fix(web): keep Thinking tables below the collapse header --- .../expected/thinking-markdown/ui.expected.md | 140 ++++++++++++++++++ apps/web/tests/thinking-markdown.e2e.ts | 22 +++ .../src/markdown/MarkdownText.module.css | 4 + 3 files changed, 166 insertions(+) diff --git a/apps/web/tests/expected/thinking-markdown/ui.expected.md b/apps/web/tests/expected/thinking-markdown/ui.expected.md index 70bcd92d5a..8b24976b56 100644 --- a/apps/web/tests/expected/thinking-markdown/ui.expected.md +++ b/apps/web/tests/expected/thinking-markdown/ui.expected.md @@ -50,6 +50,146 @@ - cell "long_table_cell_3_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" - cell "long_table_cell_4_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" - cell "long_table_cell_5_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" + - row "Row 1 column 1 Row 1 column 2 Row 1 column 3 Row 1 column 4 Row 1 column 5 Row 1 column 6": + - cell "Row 1 column 1" + - cell "Row 1 column 2" + - cell "Row 1 column 3" + - cell "Row 1 column 4" + - cell "Row 1 column 5" + - cell "Row 1 column 6" + - row "Row 2 column 1 Row 2 column 2 Row 2 column 3 Row 2 column 4 Row 2 column 5 Row 2 column 6": + - cell "Row 2 column 1" + - cell "Row 2 column 2" + - cell "Row 2 column 3" + - cell "Row 2 column 4" + - cell "Row 2 column 5" + - cell "Row 2 column 6" + - row "Row 3 column 1 Row 3 column 2 Row 3 column 3 Row 3 column 4 Row 3 column 5 Row 3 column 6": + - cell "Row 3 column 1" + - cell "Row 3 column 2" + - cell "Row 3 column 3" + - cell "Row 3 column 4" + - cell "Row 3 column 5" + - cell "Row 3 column 6" + - row "Row 4 column 1 Row 4 column 2 Row 4 column 3 Row 4 column 4 Row 4 column 5 Row 4 column 6": + - cell "Row 4 column 1" + - cell "Row 4 column 2" + - cell "Row 4 column 3" + - cell "Row 4 column 4" + - cell "Row 4 column 5" + - cell "Row 4 column 6" + - row "Row 5 column 1 Row 5 column 2 Row 5 column 3 Row 5 column 4 Row 5 column 5 Row 5 column 6": + - cell "Row 5 column 1" + - cell "Row 5 column 2" + - cell "Row 5 column 3" + - cell "Row 5 column 4" + - cell "Row 5 column 5" + - cell "Row 5 column 6" + - row "Row 6 column 1 Row 6 column 2 Row 6 column 3 Row 6 column 4 Row 6 column 5 Row 6 column 6": + - cell "Row 6 column 1" + - cell "Row 6 column 2" + - cell "Row 6 column 3" + - cell "Row 6 column 4" + - cell "Row 6 column 5" + - cell "Row 6 column 6" + - row "Row 7 column 1 Row 7 column 2 Row 7 column 3 Row 7 column 4 Row 7 column 5 Row 7 column 6": + - cell "Row 7 column 1" + - cell "Row 7 column 2" + - cell "Row 7 column 3" + - cell "Row 7 column 4" + - cell "Row 7 column 5" + - cell "Row 7 column 6" + - row "Row 8 column 1 Row 8 column 2 Row 8 column 3 Row 8 column 4 Row 8 column 5 Row 8 column 6": + - cell "Row 8 column 1" + - cell "Row 8 column 2" + - cell "Row 8 column 3" + - cell "Row 8 column 4" + - cell "Row 8 column 5" + - cell "Row 8 column 6" + - row "Row 9 column 1 Row 9 column 2 Row 9 column 3 Row 9 column 4 Row 9 column 5 Row 9 column 6": + - cell "Row 9 column 1" + - cell "Row 9 column 2" + - cell "Row 9 column 3" + - cell "Row 9 column 4" + - cell "Row 9 column 5" + - cell "Row 9 column 6" + - row "Row 10 column 1 Row 10 column 2 Row 10 column 3 Row 10 column 4 Row 10 column 5 Row 10 column 6": + - cell "Row 10 column 1" + - cell "Row 10 column 2" + - cell "Row 10 column 3" + - cell "Row 10 column 4" + - cell "Row 10 column 5" + - cell "Row 10 column 6" + - row "Row 11 column 1 Row 11 column 2 Row 11 column 3 Row 11 column 4 Row 11 column 5 Row 11 column 6": + - cell "Row 11 column 1" + - cell "Row 11 column 2" + - cell "Row 11 column 3" + - cell "Row 11 column 4" + - cell "Row 11 column 5" + - cell "Row 11 column 6" + - row "Row 12 column 1 Row 12 column 2 Row 12 column 3 Row 12 column 4 Row 12 column 5 Row 12 column 6": + - cell "Row 12 column 1" + - cell "Row 12 column 2" + - cell "Row 12 column 3" + - cell "Row 12 column 4" + - cell "Row 12 column 5" + - cell "Row 12 column 6" + - row "Row 13 column 1 Row 13 column 2 Row 13 column 3 Row 13 column 4 Row 13 column 5 Row 13 column 6": + - cell "Row 13 column 1" + - cell "Row 13 column 2" + - cell "Row 13 column 3" + - cell "Row 13 column 4" + - cell "Row 13 column 5" + - cell "Row 13 column 6" + - row "Row 14 column 1 Row 14 column 2 Row 14 column 3 Row 14 column 4 Row 14 column 5 Row 14 column 6": + - cell "Row 14 column 1" + - cell "Row 14 column 2" + - cell "Row 14 column 3" + - cell "Row 14 column 4" + - cell "Row 14 column 5" + - cell "Row 14 column 6" + - row "Row 15 column 1 Row 15 column 2 Row 15 column 3 Row 15 column 4 Row 15 column 5 Row 15 column 6": + - cell "Row 15 column 1" + - cell "Row 15 column 2" + - cell "Row 15 column 3" + - cell "Row 15 column 4" + - cell "Row 15 column 5" + - cell "Row 15 column 6" + - row "Row 16 column 1 Row 16 column 2 Row 16 column 3 Row 16 column 4 Row 16 column 5 Row 16 column 6": + - cell "Row 16 column 1" + - cell "Row 16 column 2" + - cell "Row 16 column 3" + - cell "Row 16 column 4" + - cell "Row 16 column 5" + - cell "Row 16 column 6" + - row "Row 17 column 1 Row 17 column 2 Row 17 column 3 Row 17 column 4 Row 17 column 5 Row 17 column 6": + - cell "Row 17 column 1" + - cell "Row 17 column 2" + - cell "Row 17 column 3" + - cell "Row 17 column 4" + - cell "Row 17 column 5" + - cell "Row 17 column 6" + - row "Row 18 column 1 Row 18 column 2 Row 18 column 3 Row 18 column 4 Row 18 column 5 Row 18 column 6": + - cell "Row 18 column 1" + - cell "Row 18 column 2" + - cell "Row 18 column 3" + - cell "Row 18 column 4" + - cell "Row 18 column 5" + - cell "Row 18 column 6" + - row "Row 19 column 1 Row 19 column 2 Row 19 column 3 Row 19 column 4 Row 19 column 5 Row 19 column 6": + - cell "Row 19 column 1" + - cell "Row 19 column 2" + - cell "Row 19 column 3" + - cell "Row 19 column 4" + - cell "Row 19 column 5" + - cell "Row 19 column 6" + - row "Row 20 column 1 Row 20 column 2 Row 20 column 3 Row 20 column 4 Row 20 column 5 Row 20 column 6": + - cell "Row 20 column 1" + - cell "Row 20 column 2" + - cell "Row 20 column 3" + - cell "Row 20 column 4" + - cell "Row 20 column 5" + - cell "Row 20 column 6" - paragraph: - text: "Inline math:" - math: a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + a + z diff --git a/apps/web/tests/thinking-markdown.e2e.ts b/apps/web/tests/thinking-markdown.e2e.ts index 27163b0fa2..5c39b9cbb0 100644 --- a/apps/web/tests/thinking-markdown.e2e.ts +++ b/apps/web/tests/thinking-markdown.e2e.ts @@ -69,6 +69,7 @@ function thinkingFixture(): string { '| First | Second | Third | Fourth | Fifth | Sixth |', '| --- | --- | --- | --- | --- | --- |', `| ${Array.from({ length: 6 }, (_, index) => `long_table_cell_${String(index)}_${'x'.repeat(40)}`).join(' | ')} |`, + ...Array.from({ length: 20 }, (_, row) => `| ${Array.from({ length: 6 }, (_, column) => `Row ${String(row + 1)} column ${String(column + 1)}`).join(' | ')} |`), '', `Inline math: $${'a+'.repeat(80)}z$.`, '', @@ -187,7 +188,28 @@ describe('web e2e: secondary Thinking Markdown', () => { const answerSize = await page.getByRole('heading', { name: 'Main answer', exact: true }) .evaluate(element => Number.parseFloat(getComputedStyle(element).fontSize)) expect(answerSize).toBeGreaterThan(Number.parseFloat(summaryStyle.fontSize)) + await page.setViewportSize({ width: 1680, height: 1000 }) + await page.locator('[data-conversation-scroll]').evaluate((host) => { + const row = host.querySelector('[data-variant="think"] tbody tr:nth-child(12)') + if (row === null) throw new Error('tall Thinking table row missing') + host.scrollTop += row.getBoundingClientRect().top - host.getBoundingClientRect().top + }) + await expect.poll(() => toggle.evaluate((button) => { + const host = button.closest('[data-conversation-scroll]') + const table = button.closest('[data-variant="think"]')?.querySelector('table') + if (host === null || table === null || table === undefined) throw new Error('Thinking scroll context missing') + const buttonRect = button.getBoundingClientRect() + const tableRect = table.getBoundingClientRect() + const x = buttonRect.left + buttonRect.width / 2 + const y = buttonRect.top + buttonRect.height / 2 + return { + pinned: Math.abs(buttonRect.top - host.getBoundingClientRect().top) <= 1, + tableUnderHeader: tableRect.top < y && tableRect.bottom > y, + headerReceivesPointer: button.contains(document.elementFromPoint(x, y)), + } + }), { timeout: 5_000 }).toEqual({ pinned: true, tableUnderHeader: true, headerReceivesPointer: true }) await toggle.click() + expect(await thinking.getAttribute('data-expanded')).toBeNull() expect(await summary.evaluate(element => element.getBoundingClientRect().height)) .toBeLessThanOrEqual(Number.parseFloat(summaryStyle.lineHeight) + 1) expect(await summary.evaluate(element => getComputedStyle(element).textOverflow)).toBe('ellipsis') diff --git a/packages/client/ui-primitives/src/markdown/MarkdownText.module.css b/packages/client/ui-primitives/src/markdown/MarkdownText.module.css index 079f3b504a..43e5203c43 100644 --- a/packages/client/ui-primitives/src/markdown/MarkdownText.module.css +++ b/packages/client/ui-primitives/src/markdown/MarkdownText.module.css @@ -425,6 +425,10 @@ padding-left: 0; } +.markdown.compact .tableScroll > table { + z-index: auto; +} + .compact :is(th, td) { padding: 4px 8px; font: inherit;