[GH-ISSUE #711] Markdown table cells truncate content instead of word-wrapping #962

New issue

Open

opened 2026-03-14 09:09:41 +03:00 by kerem · 0 comments

kerem commented

2026-03-14 09:09:41 +03:00

Owner

Originally created by @mocksoul on GitHub (Feb 19, 2026).
Original GitHub issue: https://github.com/anomalyco/opentui/issues/711

Description

Markdown table cells use height: 1 and overflow: "hidden", which truncates any content that doesn't fit in a single line. Long cell content is silently cut off instead of word-wrapping.

Silently hiding data from the user is about the worst thing a UI can do — the user has no way to know that content was cut off, and may act on incomplete information.

Steps to Reproduce

Render a markdown table with cells containing text wider than the column width:

| Column A | Column B | Column C |
|----------|----------|----------|
| This is a very long cell content that should wrap | Another long text here | Short |

Expected Behavior

Cell content should word-wrap within the column, and the row height should expand to accommodate the wrapped text.

Actual Behavior

Content is truncated to a single line. Anything beyond the column width is hidden.

Screenshots

Before (content truncated):

After (content word-wraps):

Root Cause

In createTableRenderable(), each cell's TextRenderable is created with height: 1 and overflow: "hidden". The table uses a column-major layout (each column is a separate flex-column container), which makes it impossible to synchronize row heights across columns when cells have different content lengths.

Proposed Fix

Rewrite the table layout from column-major to row-major:

Each row becomes a flex-row container with cells as children
Yoga's alignItems: stretch (default) automatically synchronizes cell heights within a row
Remove height: 1 and overflow: "hidden" — let measureFunc auto-calculate height based on wrapped content
Use flexBasis based on natural column widths for compact tables, flexShrink: 1 for proportional shrinking when the table exceeds viewport width

This also fixes row separators: │───│ → ├───┼───┤ (proper T-junction characters).

Originally created by @mocksoul on GitHub (Feb 19, 2026). Original GitHub issue: https://github.com/anomalyco/opentui/issues/711 ## Description Markdown table cells use `height: 1` and `overflow: "hidden"`, which truncates any content that doesn't fit in a single line. Long cell content is silently cut off instead of word-wrapping. Silently hiding data from the user is about the worst thing a UI can do — the user has no way to know that content was cut off, and may act on incomplete information. ## Steps to Reproduce Render a markdown table with cells containing text wider than the column width: ```markdown | Column A | Column B | Column C | |----------|----------|----------| | This is a very long cell content that should wrap | Another long text here | Short | ``` ## Expected Behavior Cell content should word-wrap within the column, and the row height should expand to accommodate the wrapped text. ## Actual Behavior Content is truncated to a single line. Anything beyond the column width is hidden. ## Screenshots **Before (content truncated):** <img width="1072" height="367" alt="Image" src="https://github.com/user-attachments/assets/c1180dbd-d6cf-439d-b52e-b9fe1792e029" /> **After (content word-wraps):** <img width="1056" height="707" alt="Image" src="https://github.com/user-attachments/assets/5af41340-0dbb-489b-98b2-399046efd55b" /> ## Root Cause In `createTableRenderable()`, each cell's `TextRenderable` is created with `height: 1` and `overflow: "hidden"`. The table uses a column-major layout (each column is a separate flex-column container), which makes it impossible to synchronize row heights across columns when cells have different content lengths. ## Proposed Fix Rewrite the table layout from column-major to row-major: - Each row becomes a flex-row container with cells as children - Yoga's `alignItems: stretch` (default) automatically synchronizes cell heights within a row - Remove `height: 1` and `overflow: "hidden"` — let `measureFunc` auto-calculate height based on wrapped content - Use `flexBasis` based on natural column widths for compact tables, `flexShrink: 1` for proportional shrinking when the table exceeds viewport width This also fixes row separators: `│───│` → `├───┼───┤` (proper T-junction characters).