Limit cell height to three lines in play.html by alexey-milovidov · Pull Request #102154 · ClickHouse/ClickHouse

alexey-milovidov · 2026-04-09T01:36:50Z

Wrap table cell content in a div.cell-content with max-height: 3lh to limit cell height to three lines. Overflow is hidden but scrollable on hover with a hidden scrollbar.

When a cell is selected, the div expands absolutely on top of the table with inverted colors (filter: invert(1)), capped at max-height: 50vh with vertical scroll. The outline stays on the td so it is not inverted. Row hover and selection brightness filters exclude the active cell.

Table layout (column widths and row heights) is frozen after rendering via _changeTableLayout to prevent reflow during cell navigation.

Add a copy button to the active cell.

Fix markup for the type hints in the vertical table format.

Changelog category (leave one):

Improvement

Changelog entry (a user-readable short description of the changes that goes into CHANGELOG.md):

Limit cell height to three lines in the Web UI (play.html), with expandable cells on click.

Queries to check:

SELECT * FROM "default"."github_events" WHERE created_at >= today() - 10 AND body ILIKE '%ClickHouse%' ORDER BY created_at DESC LIMIT 100

SELECT check_start_time, pull_request_number, check_name, test_name, report_url, test_context_raw FROM "default"."checks" WHERE test_context_raw LIKE '%Uninitialized value%' ORDER BY check_start_time DESC LIMIT 100

SELECT check_start_time, check_name, test_name, report_url
FROM checks
WHERE 1
    AND check_start_time >= now() - INTERVAL 24 HOUR
    AND (head_ref = 'master' AND startsWith(head_repo, 'ClickHouse/'))
    AND test_status != 'SKIPPED'
    AND (test_status LIKE 'F%' OR test_status LIKE 'E%')
    AND check_status != 'success'
    AND check_name NOT LIKE 'libFuzzer%'
    AND check_name != 'ClickHouse Keeper Jepsen'
    AND check_name NOT LIKE 'Integration tests (amd_llvm_coverage%'
ORDER BY check_start_time DESC

Shadow DOM does not inherit `box-sizing: border-box` from the outer document. When `_changeTableLayout` reads `offsetWidth` (which includes content + padding + border) and sets it as `style.width`, the default `content-box` model interprets that as content-only width, adding padding and border on top. This makes every column wider, shifting the table to the right. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Wrap table cell content in a `div.cell-content` with `max-height: 3lh`. Overflow is hidden but scrollable on hover (with hidden scrollbar). When a cell is selected, the div expands absolutely on top of the table with inverted colors, max height 50vh, and vertical scroll. Table layout is frozen (column widths and row heights) after rendering to prevent reflow during cell navigation. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

clickhouse-gh · 2026-04-09T01:37:27Z

Workflow [PR], commit [cacb00d]

Summary: ✅

AI Review

Summary

This PR updates play.html table cell rendering to cap cell height at three lines, expand selected cells in-place, and add per-cell copy controls, while preserving table navigation/resizing behavior. I reviewed the full diff and surrounding code paths, and I did not find new high-confidence correctness/safety/performance issues that require changes beyond the already existing inline discussion.

ClickHouse Rules

Item	Status	Notes
Deletion logging	➖
Serialization versioning	➖
Core-area scrutiny	➖
No test removal	✅
Experimental gate	➖
No magic constants	✅
Backward compatibility	✅
`SettingsChangesHistory.cpp`	➖
PR metadata quality	✅
Safe rollout	✅
Compilation time	✅
No large/binary files	✅

Final Verdict

Status: ✅ Approve

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Clicking on table headers, row numbers, page background, or other non-data areas now deactivates the selected cell. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Use overflow: auto on both axes instead of pre-wrap, so text layout is identical to the non-selected state and UUIDs or other content do not wrap unexpectedly due to scrollbar width. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Use min-width: 100% with width: fit-content so the div can grow slightly wider to accommodate the scrollbar without forcing content to wrap that did not wrap before. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

This reverts commit 412cb9b.

Replace width: 100% with left: 0; right: 0 to stretch the div, avoiding sub-pixel width differences that caused UUIDs to wrap at hyphens when switching from pre to pre-wrap. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

This reverts commit 7298b6d.

With border-collapse: collapse, the td's containing block is slightly narrower than the normal-flow content area due to shared borders. Using box-sizing: content-box makes width: 100% refer to the content area alone (padding added outside), so the content area is at least as wide as in normal flow, preventing unwanted wrapping at hyphens. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Use border-box with calc(100% + 2px) to add exactly the 1px collapsed border on each side, instead of content-box which added the full padding outside. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

A copy icon appears at the top-right of the selected cell. Clicking it copies the cell's text content to the clipboard. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Avoids being hidden behind the sticky table header. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Only move the button to the side for the first row when a thead is present (non-transposed). In transposed tables (no thead), the button stays at the top since there is no sticky header. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

In the transposed (vertical) table format, type hints appear next to row headers without the upward translation. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

…bytes test The test `03634_autopr_output_bytes_estimation` failed with `MEMORY_LIMIT_EXCEEDED` on ASan because the randomized setting `query_plan_max_limit_for_lazy_materialization` was set to 1, effectively disabling lazy materialization for queries with `LIMIT > 1`. Without lazy materialization, query_23 (`SELECT * FROM test.hits ... LIMIT 10`) reads all ~100 columns for all matching rows at once, exceeding the ~4.66 GiB memory limit under ASan. Pin the setting to its default (10000) alongside the already-pinned `query_plan_optimize_lazy_materialization`. https://s3.amazonaws.com/clickhouse-test-reports/json.html?PR=102154&sha=fa1d138855cd3214b416bb0d254029055ede6462&name_0=PR&name_1=Stateless%20tests%20%28amd_asan_ubsan%2C%20distributed%20plan%2C%20parallel%2C%202%2F2%29 #102154 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

alexey-milovidov · 2026-04-09T05:49:10Z

The flaky test failure in 03634_autopr_output_bytes_estimation is fixed in #102175 — the randomized query_plan_max_limit_for_lazy_materialization setting was disabling lazy materialization, causing OOM on SELECT * FROM test.hits under ASan.

alexey-milovidov · 2026-04-09T08:30:13Z

The Fast test (arm_darwin) failure is unrelated to this PR — the fix is in #102184.

pamarcos

LGTM, everything I've tested works fine 🚀

Before

After

After clicking on a huge cell, vertical scrollbar works ok:

alexey-milovidov and others added 2 commits March 31, 2026 05:22

clickhouse-gh Bot added the pr-improvement Pull request with some product improvements label Apr 9, 2026

alexey-milovidov and others added 26 commits April 9, 2026 03:38

Remove outline, word-break, and hover scroll rules per review

842c09a

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Add comments around cell height and layout changes

2f6d5a3

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Clear cell selection when clicking outside data cells

7c2bbd5

Clicking on table headers, row numbers, page background, or other non-data areas now deactivates the selected cell. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Do not deactivate cell when clicking textarea or left panel

c3f9eec

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Simplify: clear cell selection on any click outside query-result

6dd3e85

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Revert "Restore pre-wrap in selected cell, use fit-content width"

abeed1a

This reverts commit 412cb9b.

Revert "Use left/right: 0 instead of width: 100% for selected cell"

1b87e01

This reverts commit 7298b6d.

Center the selected cell div symmetrically over the border

4958ea3

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Keep top: 0 for selected cell div

cf29f88

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Compensate for collapsed border on height as well

83a153b

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Add copy button to active cell

a9f47c9

A copy icon appears at the top-right of the selected cell. Clicking it copies the cell's text content to the clipboard. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Position copy button outside the cell, above top-right corner

273bef2

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Match copy button background to active cell inverted colors

6d931c3

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Set copy button to full opacity

ec174c8

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Hide copy button for empty, NULL, and zero cells

13baa0a

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Use filter: invert(1) on copy button to match active cell style

7539976

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Raise selected cell z-index above sticky table headers

ab82d6f

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Place copy button below the cell for the first row

ec56b86

Avoids being hidden behind the sticky table header. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Revert selected cell z-index back to 10

7320fce

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Place copy button to the right of the active cell, aligned by top

b2404dd

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Place copy button above the cell; to the right for the first row

d49be52

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

alexey-milovidov and others added 3 commits April 9, 2026 04:33

Add width: fit-content to copy button

f288407

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Place copy button to the left for last cell in the first row

500c92e

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

clickhouse-gh Bot reviewed Apr 9, 2026

View reviewed changes

Comment thread programs/server/play.html

Only apply translateY on type hints in horizontal table headers

5905b37

In the transposed (vertical) table format, type hints appear next to row headers without the upward translation. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

alexey-milovidov requested a review from pamarcos April 9, 2026 03:16

Wrap by characters in active cells

fa1d138

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

pamarcos self-assigned this Apr 9, 2026

Merge branch 'master' into fix-play-cell-height

cacb00d

pamarcos approved these changes Apr 9, 2026

View reviewed changes

alexey-milovidov added this pull request to the merge queue Apr 9, 2026

Merged via the queue into master with commit 4714785 Apr 9, 2026
163 checks passed

alexey-milovidov deleted the fix-play-cell-height branch April 9, 2026 23:11

robot-ch-test-poll4 added the pr-synced-to-cloud The PR is synced to the cloud repo label Apr 9, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Limit cell height to three lines in play.html#102154

Limit cell height to three lines in play.html#102154
alexey-milovidov merged 34 commits intomasterfrom
fix-play-cell-height

alexey-milovidov commented Apr 9, 2026 •

edited

Loading

Uh oh!

clickhouse-gh Bot commented Apr 9, 2026 •

edited

Loading

Uh oh!

Uh oh!

alexey-milovidov commented Apr 9, 2026

Uh oh!

alexey-milovidov commented Apr 9, 2026

Uh oh!

pamarcos left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

alexey-milovidov commented Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog category (leave one):

Changelog entry (a user-readable short description of the changes that goes into CHANGELOG.md):

Uh oh!

clickhouse-gh Bot commented Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

AI Review

Summary

ClickHouse Rules

Final Verdict

Uh oh!

Uh oh!

alexey-milovidov commented Apr 9, 2026

Uh oh!

alexey-milovidov commented Apr 9, 2026

Uh oh!

pamarcos left a comment

Choose a reason for hiding this comment

Before

After

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

alexey-milovidov commented Apr 9, 2026 •

edited

Loading

clickhouse-gh Bot commented Apr 9, 2026 •

edited

Loading