fix(ui): prevent schedule column text from wrapping mid-word in pipeline table#30205
fix(ui): prevent schedule column text from wrapping mid-word in pipeline table#30205ShaileshParmar11 wants to merge 3 commits into
Conversation
…ine table
The Schedule cell in the ingestion/test-suite pipeline table rendered its
text inside a `wrap={false}` flex row where the text column shrinks, causing
"At 12:00 AM" / "Every day" to break character-by-character. Add
`whitespace-nowrap` to both schedule detail lines so each stays on a single
line within the fixed-width column.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
❌ PR checklist incompleteThis PR cannot be merged until the following are addressed on its linked issue:
The fields live on the linked issue in the Shipping project (open the issue → right sidebar → Projects). After you set them, re-run this check (or push a commit) — issue/project changes do not re-trigger it automatically. Maintainers can bypass this check by adding the |
github-actions
Bot
added
safe to test
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Jest test CoverageUI tests summary
|
… overflowing Addresses review feedback: whitespace-nowrap alone prevents the mid-word break but lets long verbose cron descriptions (e.g. "On day 1 of the month, only in January") expand the auto-layout column and overflow the 150–176px Schedule cell. Replace the plain nowrap with antd Typography ellipsis + tooltip in ScheduleFieldCell (min-w-0 flex column so it can shrink), and cap the schedule cell width at both call sites (tw:max-w-44 on the core-components cell, maxWidth onCell on the antd column) so ellipsis engages. Short schedules render on one line each; long ones truncate with the full text available on hover. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
🟡 Playwright Results — all passed (29 flaky)✅ 4542 passed · ❌ 0 failed · 🟡 29 flaky · ⏭️ 95 skipped
🟡 29 flaky test(s) (passed on retry)
How to debug locally# Download playwright-test-results-<shard> artifact and unzip
npx playwright show-trace path/to/trace.zip # view trace |
|
| </Table.Cell> | ||
|
|
||
| <Table.Cell className="tw:align-middle tw:w-44"> | ||
| <Table.Cell className="tw:align-middle tw:w-44 tw:max-w-44"> |
There was a problem hiding this comment.
We should be removing tw:w-44 then?
There was a problem hiding this comment.
Good question, but here we do need both — this table is the @openmetadata/ui-core-components Table, which renders table-layout: auto (unlike the antd wrapper, which is tableLayout="fixed"). Under auto layout width and max-width do different jobs.
Measured on an isolated repro (cell 176px, neighbour cell alongside):
| variant | content | cell width | ellipsis |
|---|---|---|---|
width only |
long | 422px ❌ expands | no |
max-width only |
short | 66px ❌ collapses | no |
width + max-width |
long | 176px ✅ | ✅ |
width + max-width |
short | 176px ✅ | n/a |
So under auto layout width is only a preferred size (content can push past it), while max-width alone lets the column collapse to content — a short "Every day" would shrink the column to ~66px and make it jump around per row. Keeping both pins it at 176px and caps growth.
Worth noting the sibling cells in this table (tw:w-36, tw:w-28, tw:w-60) rely on the same tw:w-* mechanism, so dropping it here would also make this column inconsistent with them.
| dataIndex: 'schedule', | ||
| key: 'schedule', | ||
| width: 150, | ||
| onCell: () => ({ style: { maxWidth: 150 } }), |
There was a problem hiding this comment.
Why width:150 doesn't take effect here?
There was a problem hiding this comment.
You're right — it does take effect, and my onCell was redundant. Removed in be08862.
The shared Table wrapper renders antd with tableLayout="fixed", so width: 150 becomes a hard cap via antd's <colgroup> and the inner ellipsis engages on its own.
Verified with an isolated repro (fixed layout + colgroup width:150, long text):
| variant | cell width | ellipsis |
|---|---|---|
| no max-width | 150px | ✅ engaged |
| with max-width | 150px | ✅ engaged |
Identical — so the max-width added nothing here. Thanks for catching it.
The shared Table wrapper renders antd with tableLayout="fixed", so the column's width: 150 is already a hard cap via colgroup and the inner ellipsis engages without any extra max-width. Verified: fixed layout with colgroup width:150 yields identical results with and without max-width (cell 150px, ellipsis engaged). The core-components table in TestSuitePipelineTab is table-layout: auto, so it still needs both tw:w-44 (holds the target width) and tw:max-w-44 (prevents content-driven growth). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Code Review ✅ ApprovedPrevents mid-word line wrapping and layout overflow in the pipeline table by constraining column widths and enabling ellipsis truncation for schedule descriptions. No issues found. OptionsDisplay: compact → Showing less information. Comment with these commands to change the behavior for this request:
Was this helpful? React with 👍 / 👎 | Gitar |
issue
fix
Problem
In the pipeline table (test-suite Data Observability tab and the ingestion list table), the Schedule column text broke character-by-character — e.g. "At 12:00 AM" rendered as "At 12:", "00", "AM" stacked vertically.
The schedule cell renders its two text lines inside a
wrap={false}Ant Design flex row. Withwrap={false}, the flex items don't wrap but the text column still shrinks below its content width, so the text itself wrapped mid-word.Fix
Add
whitespace-nowrapto both schedule detail lines (schedule-primary-detailsandschedule-secondary-details) inScheduleFieldCellso each stays on a single line within the fixed-width column.Verification
whiteSpace: nowrapand render on a single line (85px and 56px wide, inside the 176px column).Before
"At 12:" / "00" / "AM" wrapping vertically in the Schedule column.
After
"At 12:00 AM" / "Every day" — clean two-line layout, no mid-word breaks.
🤖 Generated with Claude Code
Summary by Gitar
TestSuitePipelineTabandIngestionListTableto prevent layout breaking.flex="auto"andtw:min-w-0to schedule column containers to ensure proper truncation behavior.whitespace-nowrapwithellipsison schedule details to safely handle long descriptions.This will update automatically on new commits.
Greptile Summary
This PR improves Schedule column rendering in pipeline tables. The main changes are:
Confidence Score: 5/5
This looks safe to merge.
Important Files Changed
Reviews (3): Last reviewed commit: "fix(ui): drop redundant maxWidth onCell ..." | Re-trigger Greptile
Context used (3)