Skip to content

fix(ui): add horizontal scroll for markdown tables#1562

Merged
esengine merged 1 commit into
esengine:mainfrom
T1anjiu:fix/desktop-markdown-table-scroll
May 23, 2026
Merged

fix(ui): add horizontal scroll for markdown tables#1562
esengine merged 1 commit into
esengine:mainfrom
T1anjiu:fix/desktop-markdown-table-scroll

Conversation

@T1anjiu

@T1anjiu T1anjiu commented May 22, 2026

Copy link
Copy Markdown

Summary

Add horizontal scrolling for wide Markdown tables in the desktop chat UI, and slightly widen the table viewport so wide tables are easier to read without affecting normal message layout.

Problem

When Reasonix renders Markdown tables with many columns or long cell content, the table can exceed the visible chat width. The chat container hides horizontal overflow, and the table had no dedicated scroll wrapper, so the right side of the table was clipped and could not be viewed.

The issue is in the desktop Markdown rendering path:

  • desktop/src/ui/cards.tsx renders assistant text through Markdown
  • desktop/src/Markdown.tsx renders GFM tables directly
  • desktop/src/styles.css only had general table styling, with no horizontal scroll container

Fix

  • desktop/src/Markdown.tsx — Added a custom table renderer that wraps Markdown tables in a .markdown-table-wrap container.
  • desktop/src/styles.css — Added horizontal scrolling to .markdown-table-wrap, and widened the wrapper slightly with negative side margins so wide tables have a bit more usable horizontal space.
  • desktop/src/Markdown.test.tsx — Added a regression test that verifies Markdown tables are rendered inside the scroll container.

Verification

Check Result
npx vitest run desktop/src/Markdown.test.tsx ✅ passes
npx vitest run desktop/src/Markdown.test.tsx desktop/src/ui/thread.test.tsx ✅ passes
npx tsc --noEmit -p desktop ✅ passes
git diff --check ✅ passes
npm run verify ✅ passes

Closed #1463

esengine added a commit that referenced this pull request May 23, 2026
CI's `npm ci` at the root only triggers `npm --prefix dashboard ci`,
leaving `desktop/node_modules` empty. Vitest scans `desktop/src/**`
for tests, so the first desktop test that imports a transitive dep
(e.g. `react-markdown` via `Markdown.tsx`) fails to resolve in CI
even though it passes locally for anyone who's ever run
`npm install` inside `desktop/`.

Unblocks #1562.

Co-authored-by: reasonix <reasonix@deepseek.com>
@esengine

Copy link
Copy Markdown
Owner

Reopening to re-trigger CI against new main (postinstall fix #1584 just landed).

@esengine esengine closed this May 23, 2026
@esengine esengine reopened this May 23, 2026
@esengine

Copy link
Copy Markdown
Owner

Thanks @T1anjiu — change looks good. The earlier red CI was on our side: root postinstall wasn't installing desktop/ deps, so your test was the first to hit a missing react-markdown from a clean checkout. Patched in #1584, re-triggered CI here, all green. Merging.

@esengine esengine merged commit 595a83e into esengine:main May 23, 2026
5 of 9 checks passed
esengine pushed a commit that referenced this pull request May 24, 2026
…moved, persisted usage stats, plan dispatch gate

Headline themes:
- Desktop: bundle the CLI-hosted React dashboard, retire Tauri+Preact duplicate (#1418)
- Config: drop preset abstraction; flash/pro are direct model selections (#1657, #1630)
- Stats: persist cumulative usage to session meta + auto-restore on startup (#1667, #1680, #1643, #1628)
- Plans: editMode="plan" enforced at the ToolRegistry dispatch gate (#1681); step advance fix (#1629)
- Context: fold once at turn start, drop pre-flight + byte-ceiling (#1642, #1646); collapsible compacted card (#1649)
- Subagents: per-skill flash/pro override + Settings UI (#1632)
- Desktop polish: sidebar drag-resize (#1688), responsive collapse (#1585), copy/edit overlay + msg-history nav (#1645), Esc closes modal not turn (#1685), QQ tab isolation (#1672), DiffCard for edits (#1662), theme-aware highlighting (#1655), system events toggle (#1654/#1650), macOS TCC inheritance (#1614), dashboard.enabled (#1612)
- Dashboard polish: persistent session URL (#1586, #1589, #1599), theme-aware highlighting (#1664), IME confirm-enter guard (#1689), code-fence lang fix (#1677), vendor chunk split (#1587), markdown table h-scroll (#1562)
- TUI: Alt+S input stash/recall; static history isolated from input rerenders (#1635); legacy mouse drop (#1637, #1648); multi-edit gated in review (#1647)
- Diff: SplitDiff column border holds under CJK (#1686)
- MCP: workspace roots passed to servers (#1625); codeCommand honors mcpServers (#1603)
- Config plumbing: (baseUrl, apiKey) resolved as a tuple (#1658); stale model id self-heal (#1663)

See CHANGELOG for the full list.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[UI 增强] 长表格无法水平滚动,内容在窄窗口下被截断

2 participants