ATLAS-5330: Atlas React UI: Text overflow issues in Global Search, Re…#683
Open
Brijesh619 wants to merge 1 commit into
Open
ATLAS-5330: Atlas React UI: Text overflow issues in Global Search, Re…#683Brijesh619 wants to merge 1 commit into
Brijesh619 wants to merge 1 commit into
Conversation
…cent Activity, Search Filters, and Popovers for long classification names
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
…cent Activity, Search Filters, and Popovers for long classification names
This PR fixes various UI layout breaks and text overflow issues caused by exceptionally long classification, relationship, and entity names across the Atlas React UI. Previously, when long strings were rendered in tables, modals, or search filters, they would push UI boundaries outward, misalign grid/table cells, or cause broken borders.
Specifically, this PR addresses the following areas:
Statistics Modal (ClassificationStats, EntityStats, etc.): Fixed a UI bug where the text-truncate utility class (which applies display: block !important) was applied directly to MUI components, breaking the table-layout. Text truncation is now safely wrapped in an inner
Global Search & Quick Search Popovers: Added proper max-width, flex boundaries, and noWrap rules to ensure long term/classification dropdowns truncate with an ellipsis (...) instead of overflowing the container.
Search Filters (FilterQuery): Ensured that active filter chips (Type, Classification, Relationship, Term) do not break to new lines awkwardly or expand endlessly.
Modals & Dialogs (CustomModal, DialogShowMoreLess): Title headers and assignment texts now truncate appropriately with tooltips, preventing the close button from being pushed out of view.
General Forms & Auto-completes: Wrapped types and tags in noWrap Typography components.
Styles: Consolidated inline max-width styling (sx={{ maxWidth: "400px" }}) into centralized SCSS classes (e.g. .classification-name-cell) for better maintainability.
How was this patch tested?
Manual UI Testing:
Created classifications, with 200+ character lengths.
Verified the Global Search dropdown remains within the viewport boundary without horizontal scrollbars.
Opened the "Statistics" modal and confirmed the Table structures (Name / Associated Entities) have aligned borders and no layout breakage.
Applied long tags in Search Filters and verified Chip dimensions and tooltip displays.
Unit Tests: Ran the full Jest test suite (npm run test) to ensure component logic (Filters, RelationshipFilters, TagFilters) remains unaffected. All tests passed.
Build & Linter Check: npm run build, tsc, and eslint execute successfully without regressions.