fix: breadcrumb overflow on mobile resolution

[canerakdas]

Description

The page names are too long in the breadcrumb of Learn pages, causing the page to overflow in mobile resolution.

With this PR, the last breadcrumb node, which is too long, is shown as much text as it can, and an ellipsis is added instead of an overflow

Validation

The page width for the Learn and About pages should not overflow in the preview

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	Dec 30, 2024 4:37pm

[github-actions]

Lighthouse Results

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

[github-actions]

Unit Test Coverage Report

Lines	Statements	Branches	Functions
	83.85% (587/700)	64.74% (180/278)	82.7% (110/133)

Unit Test Report

Tests	Skipped	Failures	Errors	Time
123	0 💤	0 ❌	0 🔥	4.938s ⏱️