tiann · techotaku39 · Aug 26, 2026 · Aug 26, 2026 · Aug 26, 2026 · Aug 26, 2026
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -14,6 +14,7 @@ jobs:
             - run: bun typecheck
             - run: bunx playwright install --with-deps chromium
             - run: bun run test:e2e -- terminal-wrap-fidelity.spec.ts composer-copy.spec.ts
+            - run: cd web && bunx playwright test --config playwright.config.ts e2e/markdown-table.spec.ts e2e/markdown-table-mobile.spec.ts
             - run: bun run test
 
     # Serial runner-integration suite: starts real detached runner/session

diff --git a/web/e2e-fixtures/markdown-table-fixture.html b/web/e2e-fixtures/markdown-table-fixture.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>HAPI Markdown table fixture</title>
+        <style>
+            html { background: #fff; }
+            body { margin: 0; padding: 24px; font-family: system-ui, sans-serif; }
+            #root { max-width: 960px; margin: 0 auto; }
+        </style>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="./markdown-table-fixture.tsx"></script>
+    </body>
+</html>
diff --git a/web/e2e-fixtures/markdown-table-fixture.tsx b/web/e2e-fixtures/markdown-table-fixture.tsx
@@ -0,0 +1,46 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import '../src/index.css'
+import { HappyChatProvider, type HappyChatContextValue } from '../src/components/AssistantChat/context'
+import { I18nProvider } from '../src/lib/i18n-context'
+import { MarkdownRenderer } from '../src/components/MarkdownRenderer'
+
+const TABLE_MARKDOWN = `# Repository activity
+
+| Project | Stars | Language | Latest release | Maintainer | Notes |
+| --- | ---: | --- | --- | --- | --- |
+| HAPI | 128 | TypeScript | 0.28.0 | Local-first team | Remote control for coding agents |
+| HAPI, local-first | 42 | TypeScript | 0.27.3 | Community | A deliberately long description for horizontal table scrolling |
+| Example | 7 | Rust | 1.2.0 | Open source | Stable fixture row |`
+
+const NEAR_BOTTOM_VERTICAL_TABLE_MARKDOWN = `# Near bottom table
+
+| Item | Status |
+| --- | --- |
+${Array.from({ length: 14 }, (_, index) => `| Item ${index + 1} | Ready |`).join('\n')}`
+
+function MarkdownTableFixture() {
+    const query = new URLSearchParams(window.location.search)
+    const content = query.has('near-bottom-scroll')
+        ? NEAR_BOTTOM_VERTICAL_TABLE_MARKDOWN
+        : TABLE_MARKDOWN
+
+    return (
+        <HappyChatProvider value={{ sessionTitle: 'Table filename fixture' } as HappyChatContextValue}>
+            <main data-testid="markdown-table-fixture">
+                <MarkdownRenderer standalone content={content} />
+            </main>
+        </HappyChatProvider>
+    )
+}
+
+const root = document.getElementById('root')
+if (root) {
+    ReactDOM.createRoot(root).render(
+        <React.StrictMode>
+            <I18nProvider>
+                <MarkdownTableFixture />
+            </I18nProvider>
+        </React.StrictMode>,
+    )
+}
diff --git a/web/e2e/markdown-table-mobile.spec.ts b/web/e2e/markdown-table-mobile.spec.ts
@@ -0,0 +1,124 @@
+import { devices, expect, test } from '@playwright/test'
+
+test.use({ ...devices['Pixel 7'] })
+
+test('mobile markdown table viewer requests landscape and releases orientation controls', async ({ page }) => {
+    await page.goto('/e2e-fixtures/markdown-table-fixture.html')
+    await page.evaluate(() => {
+        const state = { requestFullscreen: 0, exitFullscreen: 0, locks: [] as string[], unlocks: 0 }
+        Object.defineProperty(window, '__hapiTableViewerState', { configurable: true, value: state })
+        Object.defineProperty(document.documentElement, 'requestFullscreen', {
+            configurable: true,
+            value: () => {
+                state.requestFullscreen += 1
+                return Promise.resolve()
+            },
+        })
+        Object.defineProperty(document, 'exitFullscreen', {
+            configurable: true,
+            value: () => {
+                state.exitFullscreen += 1
+                return Promise.resolve()
+            },
+        })
+        Object.defineProperty(window.screen, 'orientation', {
+            configurable: true,
+            value: {
+                lock: (value: string) => {
+                    state.locks.push(value)
+                    return Promise.resolve()
+                },
+                unlock: () => {
+                    state.unlocks += 1
+                },
+            },
+        })
+    })
+
+    const inlineActions = page.locator('[data-testid="markdown-table-fixture"] .aui-md-table-actions')
+    await expect(inlineActions).toBeVisible()
+    await expect(inlineActions.getByRole('button')).toHaveCount(1)
+    await page.getByRole('button', { name: 'Open table full screen' }).click()
+    const dialog = page.getByRole('dialog', { name: 'Table filename fixture' })
+    await expect(dialog).toBeVisible()
+    // A real mobile browser can rotate to a landscape CSS viewport. Keep the
+    // mobile title unshifted even when its width becomes desktop-sized.
+    await page.setViewportSize({ width: 915, height: 412 })
+    const wrapButton = dialog.locator('button[data-hapi-table-wrap-toggle="true"]')
+    await expect(wrapButton).toBeVisible()
+    await expect(wrapButton).toHaveAttribute('aria-pressed', /true|false/)
+    await expect(dialog.getByRole('button', { name: 'Copy table as Markdown' })).toBeVisible()
+    const downloadButton = dialog.getByRole('button', { name: 'Download table' })
+    await expect(downloadButton).toBeVisible()
+    const initiallyWrapped = await wrapButton.getAttribute('aria-pressed')
+    await wrapButton.click()
+    await expect(wrapButton).toHaveAttribute('aria-pressed', initiallyWrapped === 'true' ? 'false' : 'true')
+    await expect.poll(() => dialog.locator('[data-hapi-table-viewer-toolbar="true"]').evaluate((element) => {
+        const style = getComputedStyle(element)
+        return `${style.paddingLeft}:${style.paddingRight}:${style.paddingTop}:${style.paddingBottom}`
+    })).toBe('6px:6px:0px:0px')
+    await expect.poll(() => dialog.locator('[data-hapi-table-viewer-toolbar="true"]').evaluate((element) => getComputedStyle(element).columnGap)).toBe('4px')
+    await expect.poll(() => dialog.locator('[data-hapi-table-viewer-heading="true"]').evaluate((element) => getComputedStyle(element).transform)).toBe('none')
+    await expect.poll(() => dialog.locator('[data-hapi-table-viewer="true"] thead th').first().evaluate((element) => {
+        const thead = element.closest('thead')
+        return `${getComputedStyle(thead ?? element).position}:${getComputedStyle(element).position}:${getComputedStyle(element).top}`
+    })).toBe('static:sticky:0px')
+    await expect.poll(() => page.evaluate(() => {
+        const state = (window as Window & { __hapiTableViewerState?: { requestFullscreen: number; locks: string[] } }).__hapiTableViewerState
+        return state ? `${state.requestFullscreen}:${state.locks.join(',')}` : ''
+    })).toBe('1:landscape')
+
+    await downloadButton.click()
+    await expect(page.getByRole('menuitem', { name: 'Download PNG' })).toBeVisible()
+    await expect(page.getByRole('menuitem', { name: 'Download CSV' })).toBeVisible()
+    const imageDownloadPromise = page.waitForEvent('download')
+    await page.getByRole('menuitem', { name: 'Download PNG' }).click()
+    const imageDownload = await imageDownloadPromise
+    expect(imageDownload.suggestedFilename()).toMatch(/^HAPI Table-Table filename fixture-\d{14}\.png$/)
+
+    const csvDownloadPromise = page.waitForEvent('download')
+    await downloadButton.click()
+    await page.getByRole('menuitem', { name: 'Download CSV' }).click()
+    const csvDownload = await csvDownloadPromise
+    expect(csvDownload.suggestedFilename()).toMatch(/^HAPI Table-Table filename fixture-\d{14}\.csv$/)
+
+    await dialog.getByRole('button', { name: 'Close table full screen' }).click()
+    await expect.poll(() => page.evaluate(() => {
+        const state = (window as Window & { __hapiTableViewerState?: { exitFullscreen: number; unlocks: number } }).__hapiTableViewerState
+        return state ? `${state.exitFullscreen}:${state.unlocks}` : ''
+    })).toBe('1:1')
+})
+
+test('mobile markdown table viewer detects a phone that starts in landscape', async ({ page }) => {
+    await page.setViewportSize({ width: 915, height: 412 })
+    await page.goto('/e2e-fixtures/markdown-table-fixture.html')
+    await expect(page.getByRole('button', { name: 'Open table full screen' })).toBeVisible()
+    await page.evaluate(() => {
+        const state = { requestFullscreen: 0, locks: [] as string[] }
+        Object.defineProperty(window, '__hapiTableViewerState', { configurable: true, value: state })
+        Object.defineProperty(document.documentElement, 'requestFullscreen', {
+            configurable: true,
+            value: () => {
+                state.requestFullscreen += 1
+                return Promise.resolve()
+            },
+        })
+        Object.defineProperty(window.screen, 'orientation', {
+            configurable: true,
+            value: {
+                lock: (value: string) => {
+                    state.locks.push(value)
+                    return Promise.resolve()
+                },
+                unlock: () => {},
+            },
+        })
+    })
+
+    await page.getByRole('button', { name: 'Open table full screen' }).click()
+    await expect(page.getByRole('dialog', { name: 'Table filename fixture' })).toBeVisible()
+    await expect.poll(() => page.evaluate(() => {
+        const state = (window as Window & { __hapiTableViewerState?: { requestFullscreen: number; locks: string[] } }).__hapiTableViewerState
+        return state ? `${state.requestFullscreen}:${state.locks.join(',')}` : ''
+    })).toBe('1:landscape')
+})