[
https://issues.apache.org/jira/browse/ATLAS-5329?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Brijesh Bhalala updated ATLAS-5329:
-----------------------------------
Description:
In the React UI dashboard, when a classification or entity with an
exceptionally long, continuous name (without spaces) appears in the
"Classification Distribution" widget, the text fails to wrap. This causes the
text string to overflow horizontally past the boundaries of the widget
container, breaking the CSS layout.
*Steps to Reproduce:*
# Create a new classification or entity with a very long name that does not
contain spaces (e.g., {{{}CLasssCLasssCLasssCLasssCLasss...{}}}).
# Navigate to the Atlas Dashboard (Home page).
# Observe the newly created item in the "Classification Distribution" widget.
*Expected Behavior:* The long text should be contained within the widget. It
should either wrap gracefully to the next line (using CSS properties like
{{word-break: break-all}} or {{{}overflow-wrap: anywhere{}}}), or truncate with
an ellipsis ({{{}...{}}}) and show the full name on hover.
*Actual Behavior:* The text does not wrap and continuously bleeds out of the
right side of the "Classification Distribution" card, breaking the layout
structure.
*Suggested Fix:* Apply {{word-break: break-word}} or {{overflow-wrap:
anywhere}} to the text span rendering the entity/classification name in the
Classification Distribution component.
was:
In the React UI dashboard, when a classification or entity with an
exceptionally long, continuous name (without spaces) appears in the "Recent
Activity" widget, the text fails to wrap. This causes the text string to
overflow horizontally past the boundaries of the widget container, breaking the
CSS layout.
*Steps to Reproduce:*
# Create a new classification or entity with a very long name that does not
contain spaces (e.g., {{{}CLasssCLasssCLasssCLasssCLasss...{}}}).
# Navigate to the Atlas Dashboard (Home page).
# Observe the newly created item in the "Recent Activity" widget.
*Expected Behavior:* The long text should be contained within the widget. It
should either wrap gracefully to the next line (using CSS properties like
{{word-break: break-all}} or {{{}overflow-wrap: anywhere{}}}), or truncate with
an ellipsis ({{{}...{}}}) and show the full name on hover.
*Actual Behavior:* The text does not wrap and continuously bleeds out of the
right side of the "Recent Activity" card, breaking the layout structure.
*Suggested Fix:* Apply {{word-break: break-word}} or {{overflow-wrap:
anywhere}} to the text span rendering the entity/classification name in the
Recent Activity component.
> Atlas React UI: Long classification names overflow and break the layout in
> the Classification Distribution
> ----------------------------------------------------------------------------------------------------------
>
> Key: ATLAS-5329
> URL: https://issues.apache.org/jira/browse/ATLAS-5329
> Project: Atlas
> Issue Type: Bug
> Components: atlas-core
> Affects Versions: 2.5.0
> Reporter: Brijesh Bhalala
> Assignee: Brijesh Bhalala
> Priority: Major
> Labels: atlas-react
> Attachments: Screenshot from 2026-06-19 14-59-10.png
>
>
> In the React UI dashboard, when a classification or entity with an
> exceptionally long, continuous name (without spaces) appears in the
> "Classification Distribution" widget, the text fails to wrap. This causes the
> text string to overflow horizontally past the boundaries of the widget
> container, breaking the CSS layout.
> *Steps to Reproduce:*
> # Create a new classification or entity with a very long name that does not
> contain spaces (e.g., {{{}CLasssCLasssCLasssCLasssCLasss...{}}}).
> # Navigate to the Atlas Dashboard (Home page).
> # Observe the newly created item in the "Classification Distribution" widget.
> *Expected Behavior:* The long text should be contained within the widget. It
> should either wrap gracefully to the next line (using CSS properties like
> {{word-break: break-all}} or {{{}overflow-wrap: anywhere{}}}), or truncate
> with an ellipsis ({{{}...{}}}) and show the full name on hover.
> *Actual Behavior:* The text does not wrap and continuously bleeds out of the
> right side of the "Classification Distribution" card, breaking the layout
> structure.
> *Suggested Fix:* Apply {{word-break: break-word}} or {{overflow-wrap:
> anywhere}} to the text span rendering the entity/classification name in the
> Classification Distribution component.
--
This message was sent by Atlassian Jira
(v8.20.10#820010)
