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	Jul 21, 2024 3:17pm

[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 🔥	5.476s ⏱️

[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

[bmuenzenmeyer]

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

[ovflowd]

cc @TenzDelek could you please rebase your PR?

[TenzDelek]

@ovflowd @bmuenzenmeyer can you check once if the pr is valid. this is my first time doing a git rebase. if any issue with this pr ,will close this and raise a new one.