Fixed the text overflow issues by Rohit0301 · Pull Request #27426 · open-metadata/OpenMetadata

Rohit0301 · 2026-04-16T08:40:02Z

Describe your changes:

Fixes

I worked on ... because ...

Type of change:

Checklist:

I have read the CONTRIBUTING document.
My PR title is Fixes <issue-number>: <short explanation>
I have commented on my code, particularly in hard-to-understand areas.
For JSON Schema changes: I updated the migration scripts or explained why it is not needed.

gitar-bot · 2026-04-16T08:41:52Z

+                <div className="tw:inline-flex tw:items-center tw:gap-0.5 tw:min-w-0">
                  <Typography.Text
-                    className={classNames('tw:text-xs', {
+                    className={classNames('tw:text-xs tw:truncate tw:max-w-32', {


💡 Edge Case: Hardcoded tw:max-w-32 may truncate breadcrumbs too aggressively

The breadcrumb text is truncated at tw:max-w-32 (128px) for all items. For deeply nested columns with long names, every breadcrumb segment will be truncated, making it difficult for users to distinguish between similarly-named segments. Consider using a responsive or relative max-width, or allowing the last breadcrumb item (the current column) to have a larger max-width since it's the most relevant.

Suggested fix:

Apply a wider max-width to the last breadcrumb item: className={classNames('tw:text-xs tw:truncate', { 'tw:max-w-48 tw:cursor-default tw:font-medium tw:text-gray-700': isLastItem, 'tw:max-w-32 tw:cursor-pointer tw:font-normal tw:text-gray-400 hover:tw:underline': !isLastItem, })}

_{Was this helpful? React with 👍 / 👎 | Reply gitar fix to apply this suggestion}

github-actions · 2026-04-16T08:43:34Z

❌ Lint Check Failed — ESLint + Prettier + Organise Imports (src)

The following files have style issues that need to be fixed:
src/components/Database/ColumnDetailPanel/ColumnDetailPanel.component.tsx src/components/Entity/EntityLineage/CustomControls.component.tsx src/components/common/EntityTitleSection/EntityTitleSection.tsx src/pages/TagsPage/ClassificationFormDrawer.tsx src/pages/TagsPage/TagFormDrawer.tsx src/pages/TagsPage/TagsPage.tsx

Fix locally (fast — only for changed files in the branch):

make ui-checkstyle-src-changed

Or to fix all files:

make ui-checkstyle-src

github-actions · 2026-04-16T09:06:00Z

Jest test Coverage

UI tests summary

Lines	Statements	Branches	Functions
	63.73% (59601/93521)	43.65% (31364/71853)	46.73% (9425/20165)

github-actions · 2026-04-16T10:42:00Z

🟡 Playwright Results — all passed (24 flaky)

✅ 3657 passed · ❌ 0 failed · 🟡 24 flaky · ⏭️ 89 skipped

Shard	Passed	Flaky	Skipped
🟡 Shard 1	476	4	4
🟡 Shard 2	649	2	7
🟡 Shard 3	651	5	1
🟡 Shard 4	628	6	27
🟡 Shard 5	609	2	42
🟡 Shard 6	644	5	8

🟡 24 flaky test(s) (passed on retry)

Features/DataAssetRulesDisabled.spec.ts › Verify the Chart entity item action after rules disabled (shard 1, 1 retry)
Features/CustomizeDetailPage.spec.ts › Data Product - customization should work (shard 1, 1 retry)
Features/CustomizeDetailPage.spec.ts › Glossary Term - customization should work (shard 1, 1 retry)
Pages/UserCreationWithPersona.spec.ts › Create user with persona and verify on profile (shard 1, 1 retry)
Features/BulkEditEntity.spec.ts › Glossary (shard 2, 1 retry)
Features/ChangeSummaryBadge.spec.ts › Automated badge should appear on entity description with Automated source (shard 2, 1 retry)
Features/RestoreEntityInheritedFields.spec.ts › Validate restore with Inherited domain and data products assigned (shard 3, 2 retries)
Features/RestoreEntityInheritedFields.spec.ts › Validate restore with Inherited domain and data products assigned (shard 3, 1 retry)
Features/RestoreEntityInheritedFields.spec.ts › Validate restore with Inherited domain and data products assigned (shard 3, 2 retries)
Features/RestoreEntityInheritedFields.spec.ts › Validate restore with Inherited domain and data products assigned (shard 3, 2 retries)
Features/RTL.spec.ts › Verify Following widget functionality (shard 3, 1 retry)
Pages/Customproperties-part2.spec.ts › entityReferenceList shows item count, scrollable list, no expand toggle (shard 4, 1 retry)
Pages/DataContracts.spec.ts › Create Data Contract and validate for Spreadsheet (shard 4, 1 retry)
Pages/DataContracts.spec.ts › Create Data Contract and validate for Database (shard 4, 1 retry)
Pages/DataProductAndSubdomains.spec.ts › Add expert to data product via UI (shard 4, 1 retry)
Pages/Domains.spec.ts › Rename domain with owners and experts preserves assignments (shard 4, 1 retry)
Pages/Entity.spec.ts › Follow & Un-follow entity (shard 4, 1 retry)
Pages/EntityDataSteward.spec.ts › User as Owner Add, Update and Remove (shard 5, 1 retry)
Pages/Glossary.spec.ts › Add and Remove Assets (shard 5, 1 retry)
Pages/HyperlinkCustomProperty.spec.ts › should display URL when no display text is provided (shard 6, 1 retry)
Pages/Lineage/DataAssetLineage.spec.ts › Column lineage for searchIndex -> table (shard 6, 1 retry)
Pages/Lineage/LineageFilters.spec.ts › Verify lineage schema filter selection (shard 6, 1 retry)
Pages/UserDetails.spec.ts › Create team with domain and verify visibility of inherited domain in user profile after team removal (shard 6, 1 retry)
Pages/Users.spec.ts › Permissions for table details page for Data Consumer (shard 6, 1 retry)

📦 Download artifacts

How to debug locally

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

gitar-bot · 2026-04-16T19:20:16Z

Code Review 👍 Approved with suggestions 1 resolved / 2 findings

Migration of inline styles to CSS classes resolves the styling inconsistency. Consider relaxing the hardcoded breadcrumb width constraint to prevent aggressive truncation.

💡 Edge Case: Hardcoded tw:max-w-32 may truncate breadcrumbs too aggressively

📄 openmetadata-ui/src/main/resources/ui/src/components/Database/ColumnDetailPanel/ColumnDetailPanel.component.tsx:817

The breadcrumb text is truncated at tw:max-w-32 (128px) for all items. For deeply nested columns with long names, every breadcrumb segment will be truncated, making it difficult for users to distinguish between similarly-named segments. Consider using a responsive or relative max-width, or allowing the last breadcrumb item (the current column) to have a larger max-width since it's the most relevant.

Suggested fix

Apply a wider max-width to the last breadcrumb item:
className={classNames('tw:text-xs tw:truncate', {
  'tw:max-w-48 tw:cursor-default tw:font-medium tw:text-gray-700': isLastItem,
  'tw:max-w-32 tw:cursor-pointer tw:font-normal tw:text-gray-400 hover:tw:underline': !isLastItem,
})}

✅ 1 resolved

✅ Quality: Inline style on line 845 should be in CSS class

📄 openmetadata-ui/src/main/resources/ui/src/components/Database/ColumnDetailPanel/ColumnDetailPanel.component.tsx:845
The style={{ flex: 1 }} inline style on line 845 is inconsistent with the rest of the approach in this PR, which defines layout properties in the ColumnDetailPanel.less file via CSS classes like title-row and title-text-column. This inline style should be incorporated into the title-row class or a dedicated class to keep styling consistent and maintainable.

🤖 Prompt for agents

Code Review: Migration of inline styles to CSS classes resolves the styling inconsistency. Consider relaxing the hardcoded breadcrumb width constraint to prevent aggressive truncation.

1. 💡 Edge Case: Hardcoded tw:max-w-32 may truncate breadcrumbs too aggressively
   Files: openmetadata-ui/src/main/resources/ui/src/components/Database/ColumnDetailPanel/ColumnDetailPanel.component.tsx:817

   The breadcrumb text is truncated at `tw:max-w-32` (128px) for all items. For deeply nested columns with long names, every breadcrumb segment will be truncated, making it difficult for users to distinguish between similarly-named segments. Consider using a responsive or relative max-width, or allowing the last breadcrumb item (the current column) to have a larger max-width since it's the most relevant.

   Suggested fix:
   Apply a wider max-width to the last breadcrumb item:
   className={classNames('tw:text-xs tw:truncate', {
     'tw:max-w-48 tw:cursor-default tw:font-medium tw:text-gray-700': isLastItem,
     'tw:max-w-32 tw:cursor-pointer tw:font-normal tw:text-gray-400 hover:tw:underline': !isLastItem,
   })}

Options

Display: compact → Showing less information.

Comment with these commands to change:

`Compact`
`gitar display:verbose`

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

sonarqubecloud · 2026-04-16T19:53:44Z

Quality Gate passed for 'open-metadata-ui'

Issues
1106 New issues
0 Accepted issues

Measures
14 Security Hotspots
0.0% Coverage on New Code
3.9% Duplication on New Code

See analysis details on SonarQube Cloud

Fixed the text overflow issues

0dcdf52

Rohit0301 self-assigned this Apr 16, 2026

Rohit0301 added the safe to test Add this label to run secure Github workflows on PRs label Apr 16, 2026

Rohit0301 requested a review from a team as a code owner April 16, 2026 08:40

gitar-bot bot reviewed Apr 16, 2026

View reviewed changes

Comment thread .../main/resources/ui/src/components/Database/ColumnDetailPanel/ColumnDetailPanel.component.tsx

gitar-bot bot reviewed Apr 16, 2026

View reviewed changes

Rohit0301 temporarily deployed to test April 16, 2026 08:49 — with GitHub Actions Inactive

Rohit0301 had a problem deploying to test April 16, 2026 08:49 — with GitHub Actions Failure

Rohit0301 temporarily deployed to test April 16, 2026 08:49 — with GitHub Actions Inactive

Rohit0301 had a problem deploying to test April 16, 2026 08:49 — with GitHub Actions Failure

Rohit0301 temporarily deployed to test April 16, 2026 08:49 — with GitHub Actions Inactive

Rohit0301 and others added 2 commits April 17, 2026 00:47

Merge branch 'main' into minor-ui-fixes

d5beb6a

fix lint issues

8cfa628

Rohit0301 temporarily deployed to test April 16, 2026 19:30 — with GitHub Actions Inactive

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fixed the text overflow issues#27426

Fixed the text overflow issues#27426
Rohit0301 wants to merge 3 commits intomainfrom
minor-ui-fixes

Rohit0301 commented Apr 16, 2026

Uh oh!

Uh oh!

gitar-bot bot Apr 16, 2026

Uh oh!

github-actions bot commented Apr 16, 2026

Uh oh!

github-actions bot commented Apr 16, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Apr 16, 2026 •

edited

Loading

Uh oh!

gitar-bot bot commented Apr 16, 2026 •

edited

Loading

Uh oh!

sonarqubecloud bot commented Apr 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

Rohit0301 commented Apr 16, 2026

Describe your changes:

Type of change:

Checklist:

Uh oh!

Uh oh!

gitar-bot bot Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Apr 16, 2026

❌ Lint Check Failed — ESLint + Prettier + Organise Imports (src)

Uh oh!

github-actions bot commented Apr 16, 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!

github-actions bot commented Apr 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🟡 Playwright Results — all passed (24 flaky)

Uh oh!

gitar-bot bot commented Apr 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sonarqubecloud bot commented Apr 16, 2026

Quality Gate passed for 'open-metadata-ui'

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

github-actions bot commented Apr 16, 2026 •

edited

Loading

github-actions bot commented Apr 16, 2026 •

edited

Loading

gitar-bot bot commented Apr 16, 2026 •

edited

Loading