Skip to content

Investigate breadcrumb wrapping and overlapping the select all box #4829

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
Open
bjester opened this issue Nov 18, 2024 · 5 comments · May be fixed by #4976
Open

Investigate breadcrumb wrapping and overlapping the select all box #4829

bjester opened this issue Nov 18, 2024 · 5 comments · May be fixed by #4976
Assignees
@AllanOXDi
Labels
DEV: frontend P2 - normal Priority: Nice to have TAG: regression TAG: ux update
Milestone
Studio: 2025 Q1 P...

Comments

@bjester
Copy link
Member

bjester commented Nov 18, 2024

Observed behavior

When viewing a deeply nested resource in a channel, that has ancestors with really long titles, it appears the breadcrumbs are wrapping and overlapping the 'Select all' checkbox

Image

Expected behavior

I believe the intent is that the breadcrumbs collapse the furthest ancestors when it would be too long, to avoid wrapping entirely.

User-facing consequences

Colliding text can be visually confusing

Usage Details

  • Browser: Chrome
@rtibbles rtibbles added this to the Studio: 2025 Q1 Patch 1 milestone Jan 14, 2025
@Annu881
Copy link

Annu881 commented Feb 10, 2025

@bjester this issue open for contributions? I'd love to work on it. Please let me know!

@bjester
Copy link
Member Author

bjester commented Feb 10, 2025

Hi @Annu881,

This could be a troublesome issue to tackle, because the code is very finicky. I will assign you, but please do let us know as soon as possible if you're unable to resolve it. Reproducing it will be half the battle, which may require a RTL language like Arabic.

Annu881 added a commit to Annu881/studio that referenced this issue Feb 24, 2025
@Annu881
Fix: breadcrumb wrapping and select all box overlap in Arabic interface
6d107c7 
- Added RTL support for breadcrumbs
- Fixed text overflow handling
- Improved multiselect component layout
- Added proper spacing for select all box

Resolves learningequality#4829
@Annu881
Copy link

Annu881 commented Feb 24, 2025

I have raised a PR, please review the PR sir.

@Annu881 Annu881 mentioned this issue Feb 24, 2025
Closed
@MisRob MisRob changed the title Breadcrumb wrapping and overlapping the select all box Investigate breadcrumb wrapping and overlapping the select all box Mar 19, 2025
@MisRob
Copy link
Member

MisRob commented Mar 19, 2025

I was able to reproduce this in English interface Image

@MisRob
Copy link
Member

MisRob commented Mar 19, 2025

Note there was an attempt to fix this #4920 which addressed some parts, but didn't address the root causes. As @bjester mentioned, it's finicky. I think we need to investigate first what exactly is the cause before moving on. Updated the issue title to reflect it.

Alternatively, we could wait and see whether KBreadcrumbs will solve this as soon as we migrate.

@AllanOXDi AllanOXDi linked a pull request Mar 27, 2025 that will close this issue
Open
@marcellamaki marcellamaki mentioned this issue Apr 16, 2025
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@AllanOXDi AllanOXDi

Labels
DEV: frontend P2 - normal Priority: Nice to have TAG: regression TAG: ux update
Projects
None yet
Milestone
Studio: 2025 Q1 Patch 1
5 participants
@bjester @rtibbles @MisRob @AllanOXDi @Annu881