[
https://issues.apache.org/jira/browse/ATLAS-5330?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Brijesh Bhalala updated ATLAS-5330:
-----------------------------------
Description:
When a classification or entity is created with an exceptionally long string of
characters without spaces, the text fails to wrap or truncate properly. This
causes the string to overflow its container boundaries, breaking the structural
layout across multiple UI components.
*Areas Affected:*
# *Global Search Bar (Header):* The autocomplete dropdown menu fails to
contain long classification names, causing the text to bleed horizontally past
the right edge of the suggestion box.
# *Recent Activity Widget (Dashboard):* Action entries continuously overflow
the card boundary, creating horizontal scrolling and overlapping margins.
# *Search Results Filter Bar:* Applied classification tag labels span out of
page bounds, breaking the search results header layout.
# *Include/Exclude Filter Dialog:* Text strings containing the long
classification name bleed out of the modal/popover boundaries in the advanced
query builder.
*Steps to Reproduce:*
# Create a classification or entity with a continuous name > 80 characters
(e.g., {{CLasssCLasssCLasssCLasss...}} with no spaces).
# Type the classification name in the Global Search Bar and observe the
dropdown suggestion overflowing.
# Go to the Atlas Dashboard and view the "Recent Activity" widget to see the
text overflow.
# Go to the "Search" page, select the long classification, and apply filters
to see the layout break in the applied tags bar and inside the filter dialog.
*Expected Behavior:* All UI components displaying user-generated text must
enforce text wrapping or truncation so the layout remains intact.
* For block elements (like Recent Activity entries and dropdown options),
apply {{overflow-wrap: anywhere;}} or {{{}word-break: break-all;{}}}.
* For single-line containers (like filter chips), apply {{text-overflow:
ellipsis; white-space: nowrap; overflow: hidden;}} with a hover tooltip.
*Actual Behavior:* Text flows continuously on a single line, bleeding outside
the container boundaries across dropdowns, cards, and modals.
was:
When a classification or entity is created with an exceptionally long,
continuous string of characters (without spaces), the text does not wrap. This
causes the text to bleed horizontally past its container boundaries, breaking
the structural layout across multiple UI components.
*Areas Affected:*
* *Recent Activity Widget (Dashboard):* Action entries overflow the card
boundary, creating horizontal scrolling and overlapping margins.
* *Search Results Filter Bar:* Applied classification tag labels span
continuously out of bounds, breaking the table header layout.
* *Include/Exclude Filter Dialog:* Text strings containing the long
classification name bleed out of the modal/popover limits.
*Steps to Reproduce:*
# Create a classification or entity with a continuous name > 80 characters
(e.g., {{CLasssCLasssCLasssCLasss...}} with no spaces).
# Go to the Atlas Dashboard and view the "Recent Activity" widget to see the
text overflow.
# Go to the "Search" page, select the long classification, and apply filters
to see the layout break in the applied tags bar and inside the filter dialog.
*Expected Behavior:* All UI components displaying user-generated text must
enforce text wrapping so the layout remains intact.
* For block elements (like Recent Activity entries), apply {{overflow-wrap:
anywhere;}} or {{word-break: break-word;}} so text wraps to the next line.
* For inline/single-line containers (like filter chips), apply
{{text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}} with a
hover tooltip.
*Actual Behavior:* Text flows continuously on a single line, bleeding outside
the container, pushing sibling elements off-screen, or breaking modal
boundaries.
> Atlas React UI: Text overflow issues in Global Search, Recent Activity,
> Search Filters, and Popovers for long classification names
> ----------------------------------------------------------------------------------------------------------------------------------
>
> Key: ATLAS-5330
> URL: https://issues.apache.org/jira/browse/ATLAS-5330
> Project: Atlas
> Issue Type: Bug
> Components: atlas-core
> Affects Versions: 2.5.0
> Reporter: Brijesh Bhalala
> Assignee: Brijesh Bhalala
> Priority: Major
> Attachments: Screenshot from 2026-06-19 15-09-25.png, Screenshot from
> 2026-06-19 15-19-56.png, Screenshot from 2026-06-19 15-26-51.png
>
>
> When a classification or entity is created with an exceptionally long string
> of characters without spaces, the text fails to wrap or truncate properly.
> This causes the string to overflow its container boundaries, breaking the
> structural layout across multiple UI components.
> *Areas Affected:*
> # *Global Search Bar (Header):* The autocomplete dropdown menu fails to
> contain long classification names, causing the text to bleed horizontally
> past the right edge of the suggestion box.
> # *Recent Activity Widget (Dashboard):* Action entries continuously overflow
> the card boundary, creating horizontal scrolling and overlapping margins.
> # *Search Results Filter Bar:* Applied classification tag labels span out of
> page bounds, breaking the search results header layout.
> # *Include/Exclude Filter Dialog:* Text strings containing the long
> classification name bleed out of the modal/popover boundaries in the advanced
> query builder.
> *Steps to Reproduce:*
> # Create a classification or entity with a continuous name > 80 characters
> (e.g., {{CLasssCLasssCLasssCLasss...}} with no spaces).
> # Type the classification name in the Global Search Bar and observe the
> dropdown suggestion overflowing.
> # Go to the Atlas Dashboard and view the "Recent Activity" widget to see the
> text overflow.
> # Go to the "Search" page, select the long classification, and apply filters
> to see the layout break in the applied tags bar and inside the filter dialog.
> *Expected Behavior:* All UI components displaying user-generated text must
> enforce text wrapping or truncation so the layout remains intact.
> * For block elements (like Recent Activity entries and dropdown options),
> apply {{overflow-wrap: anywhere;}} or {{{}word-break: break-all;{}}}.
> * For single-line containers (like filter chips), apply {{text-overflow:
> ellipsis; white-space: nowrap; overflow: hidden;}} with a hover tooltip.
> *Actual Behavior:* Text flows continuously on a single line, bleeding outside
> the container boundaries across dropdowns, cards, and modals.
--
This message was sent by Atlassian Jira
(v8.20.10#820010)
