fix(web): keep Thinking tables below the collapse header

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

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')

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;