fix(ui): center domain/data-product list row items & fix DP detail header title width by siddhant1 · Pull Request #30510 · open-metadata/OpenMetadata

siddhant1 · 2026-07-27T10:28:19Z

Two AI-mode UI fixes for the Domain & Data Product Marketplace pages.

1. List tables — vertically center row items

The Domain & Data Product list tables rendered their name cells with <Box align="start"> (→ tw:items-start), pinning the icon + name to the top of the row instead of centering it. Now align="center".

Files: components/common/atoms/domain/ui/domainFieldRenderers.tsx, components/DataProduct/DataProductListPage.tsx.

The shift shows when the row is taller than the name — i.e. a single-line name beside the icon, where it otherwise floats above the rest of the row. (A name long enough to wrap and fill the row height looks unchanged, so the demo below uses the Domains list, where test is a single line: start pins it to the top, center aligns it with the other cells.)

Before (`align="start"`)	After (`align="center"`)

2. Data Product detail header — don't reserve badge space when the status badge is empty

DataProductsDetailsPage passed badge={statusBadge} to EntityHeader. A truthy badge applies w-max-full-200 (max-width: calc(100% - 200px)) to the title column — reserving 200px even when the status badge renders nothing (the common Unprocessed status). That squeezed the title into a ~315px box and forced long names to wrap/break mid-word. The Domain header passes no badge, so it was unaffected (this was the "DP page looks wrong, Domain is fine" difference).

Fix: move statusBadge into suffix (next to the LearningIcon). It still renders inline when a status exists, but no longer reserves 200px, so the title uses its natural width.

File: components/DataProducts/DataProductsDetailsPage/DataProductsDetailsPage.component.tsx.

Before (title capped → mid-word wrap)	After (full width, one line)

🤖 Generated with Claude Code

Summary by Gitar

CI / Playwright:
- Routed Domain rename-cascade spec to the Reindex lane in Playwright plan and added corresponding unit tests

_{This will update automatically on new commits.}

Greptile Summary

The PR adjusts AI-mode marketplace header and table layouts.

Vertically centers name-cell content in Domain and Data Product list rows.
Moves the Data Product status badge into the header suffix so the title no longer reserves badge-specific width.

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failure remains.

Important Files Changed

Filename	Overview
openmetadata-ui/src/main/resources/ui/src/components/DataProduct/DataProductListPage.tsx	Centers content in the Data Product name and compact list cells.
openmetadata-ui/src/main/resources/ui/src/components/DataProducts/DataProductsDetailsPage/DataProductsDetailsPage.component.tsx	Renders the optional status badge beside the learning icon without applying the badge title-width constraint.
openmetadata-ui/src/main/resources/ui/src/components/common/atoms/domain/ui/domainFieldRenderers.tsx	Centers Domain and Data Product name-cell content vertically.

_{Reviews (8): Last reviewed commit: "Merge branch 'main' into fix-ui-marketpl..." | Re-trigger Greptile}

The AI-mode Domain and Data Product list tables rendered their name cells with `<Box align="start">` (align-items: flex-start), pinning the icon + name to the top of the row instead of centering it — most visible when the name wraps to multiple lines. Use `align="center"` on the name/Domains cells so the icon lines up with the middle of the (single- or multi-line) name. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Copilot

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

github-actions · 2026-07-27T10:28:27Z

❌ PR checklist incomplete

This PR cannot be merged until the following are addressed on its linked issue:

No GitHub issue is linked. Link an issue in the Development section of the PR (or add Fixes #12345 to the description). For a same-org cross-repo issue, add Fixes open-metadata/<repo>#123 to the description.

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 skip-pr-checks label.

github-actions · 2026-07-27T10:28:41Z

Hi there 👋 Thanks for your contribution!

The OpenMetadata team will review the PR shortly! Once it has been labeled as safe to test, the CI workflows
will start executing and we'll be able to make sure everything is working as expected.

Let us know if you need any help!

github-actions · 2026-07-27T10:29:59Z

🔴 Playwright Results — workflow failed

Validated commit f987b49e4e4ba929b9d457f524fe41dccf12f4ee in Playwright run 30266091537, attempt 2.

✅ 0 passed · ❌ 0 failed · 🟡 0 flaky · ⏭️ 0 skipped · 🧰 0 lifecycle flaky

Pipeline and setup failures (5)

Duration-aware shard planning finished with status failure.
Fixture cache restoration finished with status skipped.
Seeded fixture preparation finished with status skipped.
The Playwright shard matrix was unexpectedly skipped.
No expected Playwright shards were declared.

Performance

⚪ Performance metrics unavailable; see the CI and reporting failures above.

Shard	Passed	Failed	Flaky	Skipped	Lifecycle failed	Lifecycle flaky

📦 Download artifacts

How to debug locally

# Download playwright-test-results-<shard> artifact and unzip
npx playwright show-trace path/to/trace.zip    # view trace

…adge is empty DataProductsDetailsPage passed `badge={statusBadge}` to EntityHeader. A truthy `badge` applies `w-max-full-200` (max-width: calc(100% - 200px)) to the title column — reserving 200px even when EntityStatusBadge renders nothing (the common `Unprocessed` status), which squeezed the title into a narrow box and forced long names to wrap/break mid-word. The Domain header passes no badge and is unaffected. Move `statusBadge` into `suffix` (next to the LearningIcon): it still renders inline when a status exists, but no longer reserves 200px, so the title uses its natural width. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Copilot

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

github-actions · 2026-07-27T10:46:50Z

Hi there 👋 Thanks for your contribution!

The OpenMetadata team will review the PR shortly! Once it has been labeled as safe to test, the CI workflows
will start executing and we'll be able to make sure everything is working as expected.

Let us know if you need any help!

Copilot

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

github-actions · 2026-07-27T11:26:19Z

Jest test Coverage

UI tests summary

Lines	Statements	Branches	Functions
	65.67% (76796/116932)	49.54% (46106/93057)	50.76% (13892/27365)

Copilot

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

Copilot

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

Copilot

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

Copilot

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

gitar-bot · 2026-07-27T12:30:04Z

Code Review ✅ Approved

Vertically centers domain and data product list row items and updates the data product detail header layout to prevent empty status badges from restricting title width. No issues found.

Options

Display: compact → Showing less information.

Comment with these commands to change the behavior for this request:

`Compact`
`gitar display:verbose`

_{Was this helpful? React with 👍 / 👎 | Gitar}

sonarqubecloud · 2026-07-27T12:49:05Z

Quality Gate passed for 'open-metadata-ui'

Issues
1216 New issues
0 Accepted issues

Measures
13 Security Hotspots
0.0% Coverage on New Code
3.0% Duplication on New Code

See analysis details on SonarQube Cloud

siddhant1 requested a review from a team as a code owner July 27, 2026 10:28

Copilot AI review requested due to automatic review settings July 27, 2026 10:28

Copilot AI reviewed Jul 27, 2026

anuj-kumary previously approved these changes Jul 27, 2026

View reviewed changes

siddhant1 dismissed anuj-kumary’s stale review via f17fa7f July 27, 2026 10:46

Copilot AI review requested due to automatic review settings July 27, 2026 10:46

Copilot AI reviewed Jul 27, 2026

siddhant1 changed the title ~~fix(ui): vertically center domain & data product list row items~~ fix(ui): center domain/data-product list row items & fix DP detail header title width Jul 27, 2026

siddhant1 added UI UI specific issues safe to test Add this label to run secure Github workflows on PRs skip-pr-checks Bypass PR metadata validation check labels Jul 27, 2026

siddhant1 added 2 commits July 27, 2026 16:21

Merge branch 'main' into fix-ui-marketplace-list-item-alignment

e9e9d3c

Merge branch 'main' into fix-ui-marketplace-list-item-alignment

19f9d0e

Copilot AI review requested due to automatic review settings July 27, 2026 11:12

Copilot AI reviewed Jul 27, 2026

Merge branch 'main' into fix-ui-marketplace-list-item-alignment

cf9dffc

Copilot AI review requested due to automatic review settings July 27, 2026 11:35

Copilot AI reviewed Jul 27, 2026

Merge branch 'main' into fix-ui-marketplace-list-item-alignment

f987b49

Copilot AI review requested due to automatic review settings July 27, 2026 11:52

Copilot AI reviewed Jul 27, 2026

siddhant1 enabled auto-merge (squash) July 27, 2026 11:56

Copilot AI review requested due to automatic review settings July 27, 2026 12:22

siddhant1 requested review from a team, akash-jain-10, harshach and tutte as code owners July 27, 2026 12:22

Copilot AI reviewed Jul 27, 2026

siddhant1 force-pushed the fix-ui-marketplace-list-item-alignment branch from e06ae1b to f987b49 Compare July 27, 2026 12:29

Copilot AI review requested due to automatic review settings July 27, 2026 12:29

Copilot AI reviewed Jul 27, 2026

Uh oh!

Conversation

siddhant1 commented Jul 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

1. List tables — vertically center row items

2. Data Product detail header — don't reserve badge space when the status badge is empty

Summary by Gitar

Greptile Summary

Confidence Score: 5/5

Important Files Changed

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jul 27, 2026

❌ PR checklist incomplete

Uh oh!

github-actions Bot commented Jul 27, 2026

Uh oh!

github-actions Bot commented Jul 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔴 Playwright Results — workflow failed

Pipeline and setup failures (5)

Performance

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jul 27, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jul 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Jest test Coverage

UI tests summary

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

gitar-bot Bot commented Jul 27, 2026

Uh oh!

sonarqubecloud Bot commented Jul 27, 2026

Quality Gate passed for 'open-metadata-ui'

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

siddhant1 commented Jul 27, 2026 •

edited

Loading

github-actions Bot commented Jul 27, 2026 •

edited

Loading

github-actions Bot commented Jul 27, 2026 •

edited

Loading