Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Implement ellipsis for long category names to prevent horizontal scrolling #29568

Closed
Tracked by #28493
oidacra opened this issue Aug 13, 2024 · 2 comments · Fixed by #29805
Closed
Tracked by #28493

Implement ellipsis for long category names to prevent horizontal scrolling #29568

oidacra opened this issue Aug 13, 2024 · 2 comments · Fixed by #29805
Assignees
@hmoreras
Labels
Gardening Day QA : Approved Release : 24.09.21 UVE // Java21 Team : Falcon Type : Defect

Comments

@oidacra
Copy link
Member

oidacra commented Aug 13, 2024

Parent Issue

No response

Problem Statement

Modify the category display component to add ellipsis to category names that are too long, preventing horizontal scrolling and improving the overall user interface.

Steps to Reproduce

  1. Open the category selection interface.
  2. Navigate to the 3rd or 4th level of the category hierarchy.
  3. Locate a category with a very long name.
  4. Observe that the long name pushes the container boundaries.
  5. Notice the appearance of a horizontal scrollbar (scroll-x).

Acceptance Criteria

  1. Long category names are truncated with ellipsis (...) when they exceed the available width.
  2. No horizontal scrolling occurs due to long category names, even at deep category levels.
  3. The full category name is visible on hover (e.g., via tooltip).
  4. The layout remains consistent and visually appealing for all category name lengths.
  5. The fix is applied consistently across all levels of the category hierarchy.

dotCMS Version

master

Proposed Objective

User Experience

Proposed Priority

Priority 3 - Average

External Links... Slack Conversations, Support Tickets, Figma Designs, etc.

No response

Assumptions & Initiation Needs

No response

Quality Assurance Notes & Workarounds

No response

Sub-Tasks & Estimates

No response
@oidacra oidacra mentioned this issue Aug 13, 2024
Closed
@nicobytes nicobytes assigned nicobytes and unassigned nicobytes Aug 30, 2024
@hmoreras hmoreras self-assigned this Aug 30, 2024
@hmoreras hmoreras linked a pull request Aug 30, 2024 that will close this issue
fix ( category field): #29568 and #29801 Implement ellipsis for long category names / Fix empty state. #29805
Merged
github-merge-queue bot pushed a commit that referenced this issue Aug 30, 2024
@hmoreras
fix ( category field): #29568 and #29801 Implement ellipsis for long …
d7bf730 
…category names / Fix empty state. (#29805)

### Proposed Changes
* Implement ellipsis for long category names to prevent horizontal
scrolling
* Fix empty state in categories. 


### Screenshots

Before: 

<img width="843" alt="image"
src="https://github.com/user-attachments/assets/92840948-82a4-4123-a482-4ea6219654ec">

<img width="1310" alt="image"
src="https://github.com/user-attachments/assets/824c6c59-ed1b-4e15-b95e-35c1c9b729ab">


After: 

<img width="927" alt="image"
src="https://github.com/user-attachments/assets/808d67d1-bc82-4b80-bdee-1b34f8634ddc">

<img width="1087" alt="image"
src="https://github.com/user-attachments/assets/0d3fa648-5e46-445a-a5ba-1defd08453af">
@nicobytes nicobytes assigned nicobytes and unassigned hmoreras Sep 2, 2024
@nicobytes
Copy link
Contributor

IQA passed with trunk_cc63b1d

The categories with long titles will be succesfly truncated.

Image

I suggest this same behavior is the breadcrumbs.

@nicobytes nicobytes assigned hmoreras and unassigned nicobytes Sep 3, 2024
@josemejias11
Copy link
Contributor

Approved: Tested on trunk_e622545, Docker, macOS 14.5, FF v126.0.1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@hmoreras hmoreras

Labels
Gardening Day QA : Approved Release : 24.09.21 UVE // Java21 Team : Falcon Type : Defect
Projects
dotCMS - Product Planning
Status: Done
Milestone
No milestone
5 participants
@dsilvam @oidacra @nicobytes @hmoreras @josemejias11