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.

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

Breadcrumbs, when long, overlap the title on small size screens #1451

Closed
dbitouze opened this issue Sep 16, 2023 · 4 comments · Fixed by #1460
Closed

Breadcrumbs, when long, overlap the title on small size screens #1451

dbitouze opened this issue Sep 16, 2023 · 4 comments · Fixed by #1460
Labels
impact: block-release Should block a release from happening. Only use if this is a critical problem we don't want to ship

Comments

@dbitouze
Copy link
Contributor

When the title of the current page is long, the breadcrumb is also long. Since the last element of the breadcrumb (the title) is not shortened by dots, it may result on small screens in a (at least) 3 lines long breadcrumb. In such a case, the title of the current page and the breadcrumb overlap.

Here is an example:
Capture d’écran 2023-09-16 à 22 14 00

@trallard
Copy link
Collaborator

I wonder if we should look at increasing the space between the title and breadcrumbs in mobile or I wonder if after X number of characters we should truncate the title of the current page in the breadcrumbs.

Thoughts? @gabalafou @smeragoel

@12rambau
Copy link
Collaborator

even though I was'nt pinged, I will add my .2$ 😄
I think we should truncate the number of characters. It's the last level that is problematic i.e. it's the title of the current page so it's not a link.

@dbitouze
Copy link
Contributor Author

@trallard and @12rambau: I agree the title of the current page could be truncated since, in addition to not be a link, it is written just below.

@12rambau 12rambau added the impact: block-release Should block a release from happening. Only use if this is a critical problem we don't want to ship label Sep 18, 2023
@smeragoel
Copy link
Contributor

smeragoel commented Sep 19, 2023

I agree, truncation is the way to go, and that is what is done usually. 15 characters for the cutoff limit should be enough.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
impact: block-release Should block a release from happening. Only use if this is a critical problem we don't want to ship
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants