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

Enhancement: Breadcrumb breakpoint #6754

Closed
TenzDelek opened this issue Jun 1, 2024 · 2 comments · Fixed by #6794
Closed

Enhancement: Breadcrumb breakpoint #6754

TenzDelek opened this issue Jun 1, 2024 · 2 comments · Fixed by #6794

Comments

@TenzDelek
Copy link
Contributor

Enter your suggestions in details:

Issue

some of the breadcrumb that are long have a inconsistent layout.
resulting in some layout shifting of the breadcrumb detail.
image
image

also in some case, the layout is breaking down like this below:
image
ref:

  1. https://nodejs.org/en/learn/getting-started/nodejs-the-difference-between-development-and-production

idea

Proposal: creating a breakpoint function of till 4 word (seems ideal when i tried)

Solution preview

  • only trigger the breakpoint when the word count excede 4
image image
@ovflowd
Copy link
Member

ovflowd commented Jun 2, 2024

I believe we can set the width to 100% and simply add ellipsis in case the title is too long.

We also added a breakpoint that for small screens only the last node would show. But that seems to not be enough of course.

I don't think we should have line breaks, but have "..." when the text is too long 👀

@TenzDelek
Copy link
Contributor Author

I believe we can set the width to 100% and simply add ellipsis in case the title is too long.

We also added a breakpoint that for small screens only the last node would show. But that seems to not be enough of course.

I don't think we should have line breaks, but have "..." when the text is too long 👀

definitely that sounds great. will implement that instead of the line break 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants