fix: added ellipsis for long content in breadcrumb

[TenzDelek]

Description

added ellipsis for the long content in the breadcrumb to improve the layout shifting and in some case, breaking of the breadcrumb into next line.

Validation

before:

after:

Other Changes

• Layout is shifted toward the left.

Related Issues

Fixes #6754

Check List

• I have read the Contributing Guidelines and made commit messages that follow the guideline.
• I have run npm run format to ensure the code follows the style guide.
• I have run npm run test to check if all tests are passing.
• I have run npx turbo build to check if the website builds without errors.
• I've covered new added functionality with unit tests if necessary.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	Jun 4, 2024 10:29am

[ovflowd]

Alrighty, awesome contribution! Thanks for fixing this :)

[github-actions]

Lighthouse Results

URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🟢 93	🟢 100	🟢 96	🟢 91	🔗
/en/about	🟢 100	🟢 100	🟢 96	🟢 91	🔗
/en/about/previous-releases	🟢 99	🟢 100	🟢 100	🟢 92	🔗
/en/download	🟢 100	🟢 100	🟢 100	🟢 91	🔗
/en/blog	🟢 98	🟢 100	🟢 96	🟢 92	🔗

[github-actions]

Unit Test Coverage Report

Lines	Statements	Branches	Functions
	90.67% (593/654)	76.08% (175/230)	94.57% (122/129)

Unit Test Report

Tests	Skipped	Failures	Errors	Time
131	0 💤	0 ❌	0 🔥	6.283s ⏱️

[ovflowd]

Can we update the code so that it attempts to use as much of the available width as possible?

As you can see on this screenshot, there's still available space 👀

[TenzDelek]

Can we update the code so that it attempts to use as much of the available width as possible?

As you can see on this screenshot, there's still available space 👀

hmm, seems interesting, in my viewport, the display is getting to it full. (maybe it depends on resolution of the screen)

what might be the appropriate length because for ellipsis to get trigger i believe we need a fix width (current implementation uses max-w-96 (384px)

[ovflowd]

Can we update the code so that it attempts to use as much of the available width as possible?

As you can see on this screenshot, there's still available space 👀

hmm, seems interesting, in my viewport, the display is getting to it full. (maybe it depends on resolution of the screen)

what might be the appropriate length because for ellipsis to get trigger i believe we need a fix width (current implementation uses max-w-96 (384px)

max-w-full should work? Which sets the width to 100%; You dont need to define a static width for ellipsis to work.

[TenzDelek]

Can we update the code so that it attempts to use as much of the available width as possible?

As you can see on this screenshot, there's still available space 👀

hmm, seems interesting, in my viewport, the display is getting to it full. (maybe it depends on resolution of the screen)

what might be the appropriate length because for ellipsis to get trigger i believe we need a fix width (current implementation uses max-w-96 (384px)

max-w-full should work? Which sets the width to 100%; You dont need to define a static width for ellipsis to work.

the max-w-full doesn't seem to work. it is instead shifting the width further making the right panel smaller.

i believe from what i have seen, we are doing is making a fix length for a individual breaditem and applying the truncate to it. but what we oversight is that how we can make it truncate when it reaches the width like here the overall breadcrumb. (i hope this make sense haha)
i will again look into it and get back , thank you for pointing this out

[ovflowd]

Can we update the code so that it attempts to use as much of the available width as possible?

As you can see on this screenshot, there's still available space 👀

hmm, seems interesting, in my viewport, the display is getting to it full. (maybe it depends on resolution of the screen)

what might be the appropriate length because for ellipsis to get trigger i believe we need a fix width (current implementation uses max-w-96 (384px)

max-w-full should work? Which sets the width to 100%; You dont need to define a static width for ellipsis to work.

the max-w-full doesn't seem to work. it is instead shifting the width further making the right panel smaller. i believe from what i have seen, we are doing is making a fix length for a individual breaditem and applying the truncate to it. but what we oversight is that how we can make it truncate when it reaches the width like here the overall breadcrumb. (i hope this make sense haha) i will again look into it and get back , thank you for pointing this out

Im pretty sure what Im referring to is possible, you might just need to investigate a bit more xD

[TenzDelek]

hey @ovflowd
Following up on our discussion about the breadcrumb layout, I've implemented the suggested changes. However, I've encountered an issue where extensive text in the breadcrumb section seems to be causing the right panel to shrink in width rather than truncating with an ellipsis (...).
I suspect this might be related to the current grid layout settings. I have tried all the possibilities but was not able to come up with the solution haha, if possible can you give any possible solution that I might be oversighting ;)

[ovflowd]

hey @ovflowd Following up on our discussion about the breadcrumb layout, I've implemented the suggested changes. However, I've encountered an issue where extensive text in the breadcrumb section seems to be causing the right panel to shrink in width rather than truncating with an ellipsis (...). I suspect this might be related to the current grid layout settings. I have tried all the possibilities but was not able to come up with the solution haha, if possible can you give any possible solution that I might be oversighting ;)

Hi @TenzDelek, thanks for investigating! Unfortunately I don't have the time/capacity to look into this now, maybe someone from the Website team can? (cc @nodejs/nodejs-website)

[AugustinMauroy]

@TenzDelek now it's not centered anymore

[AugustinMauroy]

Suggested change

	pl-2;
	px-2;

It's allow to have same padding left and right

[TenzDelek]

will implement that right off. also about the breadcrumb being on left, I believe that is due to making it full width. should we keep it or make it as default? the purpose of this was there was noticeable shifting of the breadcrumb when different text length occurs. so keeping it at a same starting point we can reduce that shifting.. :)

[bmuenzenmeyer]

I can see arguments either way, but since people are not really seeing the centered breadcrumb move (since it's at the bottom) it is a small concern to me. I'd rather it be centered, just as an opinion (and to preserve the original design's integrity), or if it is anchored to the left, it has padding similar to the content

[TenzDelek]

@bmuenzenmeyer appreciate your input on this. I too see this issue in either way, but if it affecting the integrity of the original design, then definitely i will shift it back to the center as mention by both @AugustinMauroy and you:) .
p.s I am still figuring out about our main conversation which is to make ellipsis on the longer text format. if any of the members have any navigation on that, it would be helpful :)

[ovflowd]

@bmuenzenmeyer can you follow up here? Are you fine with this getting merged as it is? :)

[bmuenzenmeyer]

This PR will need to be rebased or recreated now that #6850 merged.