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

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

Describe your changes:

Fixed the text overflow issues on explore page, classification page sidebar, also fixed the z-index issue in classification page. And updated the tab button type in lineage page.
Also in columnDetailsPanel component both tailwind and bootstrap classes are used, so i have make it consistent.

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.

Summary by Gitar

UI styling and layout:
- Migrated legacy CSS classes to Tailwind utility classes throughout ColumnDetailPanel.component.tsx.
- Added min-w-0 and overflow-hidden to container elements to resolve text overflow issues.

_{This will update automatically on new commits.}

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
	61.94% (61763/99708)	42.06% (33022/78508)	45.09% (9763/21648)

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

🔴 Playwright Results — 1 failure(s), 19 flaky

✅ 3953 passed · ❌ 1 failed · 🟡 19 flaky · ⏭️ 86 skipped

Shard	Passed	Failed	Flaky	Skipped
🟡 Shard 1	298	0	1	4
🟡 Shard 2	751	0	8	8
🟡 Shard 3	730	0	2	7
🔴 Shard 4	755	1	3	18
🟡 Shard 5	685	0	2	41
🟡 Shard 6	734	0	3	8

Genuine Failures (failed on all attempts)

❌ Pages/CustomProperties.spec.ts › Set & update column-level custom property (shard 4)

�[31mTest timeout of 300000ms exceeded.�[39m

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

Pages/UserCreationWithPersona.spec.ts › Create user with persona and verify on profile (shard 1, 1 retry)
Features/ActivityAPI.spec.ts › Activity event is created when description is updated (shard 2, 1 retry)
Features/ActivityAPI.spec.ts › Activity event shows the actor who made the change (shard 2, 1 retry)
Features/ActivityAPI.spec.ts › Activity Feed widget displays feed items (shard 2, 1 retry)
Features/DomainFilterQueryFilter.spec.ts › Domain filter should persist across page navigation (shard 2, 1 retry)
Features/Glossary/GlossaryNavigation.spec.ts › should post comment on glossary activity feed (shard 2, 1 retry)
Features/Glossary/GlossaryP3Tests.spec.ts › should handle multiple rapid API calls (shard 2, 1 retry)
Features/Glossary/GlossaryWorkflow.spec.ts › should display correct status badge color and icon (shard 2, 1 retry)
Features/Glossary/GlossaryWorkflow.spec.ts › should start term as Draft when glossary has reviewers (shard 2, 2 retries)
Features/RTL.spec.ts › Verify Following widget functionality (shard 3, 1 retry)
Flow/PersonaFlow.spec.ts › Set default persona for team should work properly (shard 3, 1 retry)
Pages/CustomProperties.spec.ts › Set & Update all CP types on apiCollection (shard 4, 1 retry)
Pages/DataContractInheritance.spec.ts › Delete Button Disabled - Fully inherited contracts cannot be deleted (shard 4, 1 retry)
Pages/DataContractsSemanticRules.spec.ts › Validate DataProduct Rule Any_In (shard 4, 1 retry)
Pages/Entity.spec.ts › User as Owner Add, Update and Remove (shard 5, 1 retry)
Pages/EntityDataSteward.spec.ts › Team as Owner Add, Update and Remove (shard 5, 1 retry)
Pages/Lineage/LineageFilters.spec.ts › Verify lineage schema filter selection (shard 6, 1 retry)
Pages/Lineage/LineageRightPanel.spec.ts › Verify custom properties tab IS visible for supported type: searchIndex (shard 6, 1 retry)
Pages/Users.spec.ts › Check permissions for Data Steward (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-26T09:39:46Z

Code Review 👍 Approved with suggestions 1 resolved / 2 findings

Refactored the breadcrumb styling to move the inline style to a CSS class. Consider adjusting the hardcoded tw:max-w-32 constraint to prevent overly aggressive text 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: Refactored the breadcrumb styling to move the inline style to a CSS class. Consider adjusting the hardcoded tw:max-w-32 constraint to prevent overly aggressive text 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-26T10:06:05Z

Quality Gate passed for 'open-metadata-ui'

Issues
1062 New issues
0 Accepted issues

Measures
17 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 Outdated

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

used tailwind css

c2e4a8a

Rohit0301 temporarily deployed to test April 20, 2026 16:10 — with GitHub Actions Inactive

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

Rohit0301 temporarily deployed to test April 21, 2026 17:31 — with GitHub Actions Inactive

Merge branch 'main' into minor-ui-fixes

48dd380

Rohit0301 temporarily deployed to test April 25, 2026 11:05 — with GitHub Actions Inactive

Rohit0301 had a problem deploying to test April 25, 2026 11:05 — with GitHub Actions Failure

Rohit0301 temporarily deployed to test April 25, 2026 11:05 — with GitHub Actions Inactive

Merge branch 'main' into minor-ui-fixes

c232a66

Rohit0301 temporarily deployed to test April 25, 2026 15:26 — with GitHub Actions Inactive

Rohit0301 had a problem deploying to test April 25, 2026 15:26 — with GitHub Actions Failure

Rohit0301 temporarily deployed to test April 25, 2026 15:26 — with GitHub Actions Inactive

Rohit0301 had a problem deploying to test April 25, 2026 18:24 — with GitHub Actions Failure

Rohit0301 had a problem deploying to test April 26, 2026 05:24 — with GitHub Actions Failure

Merge branch 'main' into minor-ui-fixes

2db7b4d

Rohit0301 had a problem deploying to test April 26, 2026 09:48 — with GitHub Actions Failure

Rohit0301 temporarily deployed to test April 26, 2026 09:48 — 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 8 commits intomainfrom
minor-ui-fixes

Rohit0301 commented Apr 16, 2026 •

edited

Loading

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 26, 2026 •

edited

Loading

Uh oh!

sonarqubecloud Bot commented Apr 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

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

Uh oh!

Describe your changes:

Type of change:

Checklist:

Summary by Gitar

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 — 1 failure(s), 19 flaky

Genuine Failures (failed on all attempts)

Uh oh!

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

Uh oh!

Uh oh!

sonarqubecloud Bot commented Apr 26, 2026

Quality Gate passed for 'open-metadata-ui'

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Rohit0301 commented Apr 16, 2026 •

edited

Loading

github-actions Bot commented Apr 16, 2026 •

edited

Loading

github-actions Bot commented Apr 16, 2026 •

edited

Loading

gitar-bot Bot commented Apr 26, 2026 •

edited

Loading