-
Notifications
You must be signed in to change notification settings - Fork 6.2k
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
fix: added ellipsis for long content in breadcrumb #6794
fix: added ellipsis for long content in breadcrumb #6794
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Alrighty, awesome contribution! Thanks for fixing this :)
Lighthouse Results
|
hey @ovflowd |
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) |
@TenzDelek now it's not centered anymore |
This PR will need to be rebased or recreated now that #6850 merged. |
cc @TenzDelek could you please rebase your PR? |
Signed-off-by: Claudio W <[email protected]>
083d072
to
80b672e
Compare
@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. |
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:
![image](https://private-user-images.githubusercontent.com/122612557/335948635-871323bc-0985-48af-92bb-d7f73efef52e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ5ODc2NzUsIm5iZiI6MTcyNDk4NzM3NSwicGF0aCI6Ii8xMjI2MTI1NTcvMzM1OTQ4NjM1LTg3MTMyM2JjLTA5ODUtNDhhZi05MmJiLWQ3ZjczZWZlZjUyZS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODMwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgzMFQwMzA5MzVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1hYmJlZjEzOWYyYzQ3NzAyZThiNzRiYjhjMTA5NDJhOWMzNTgxYmViMGYxOTBmY2M2MmY3NWNiZTJhMjY1MmVjJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.7gsY-yYXwEezySJJeDFMCGam-Qu2g0ALmgUrZy6EIVs)
after:
![image](https://private-user-images.githubusercontent.com/122612557/335948916-75df5705-b141-4e43-bb96-8ef388528762.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ5ODc2NzUsIm5iZiI6MTcyNDk4NzM3NSwicGF0aCI6Ii8xMjI2MTI1NTcvMzM1OTQ4OTE2LTc1ZGY1NzA1LWIxNDEtNGU0My1iYjk2LThlZjM4ODUyODc2Mi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODMwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgzMFQwMzA5MzVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT05MjhhOTgzMjZjMDdkY2ViYzg2ZDhmOGMyOWI0ZDYyZTVhY2IwMjAyYTA5NmQxOTA0ZDA0MzdjMTE1NTQ3MDc2JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.m2-pjI-lIglC1rG7cFRYjqfwq1Em-8EpHOVZF7Cxl_Y)
Other Changes
Related Issues
Fixes #6754
Check List
npm run format
to ensure the code follows the style guide.npm run test
to check if all tests are passing.npx turbo build
to check if the website builds without errors.