Skip to content

Replace back-links with breadcrumbs, fix truncation and remove duplication - #5697

Merged
n-lark merged 2 commits into
mainfrom
fix/breadcrumb-mobile-overflow
Aug 27, 2026
Merged

Replace back-links with breadcrumbs, fix truncation and remove duplication#5697
n-lark merged 2 commits into
mainfrom
fix/breadcrumb-mobile-overflow

Conversation

@sumitshinde-84

@sumitshinde-84 sumitshinde-84 commented Aug 27, 2026

Copy link
Copy Markdown
Contributor

Summary

  • The breadcrumb and the "Back to X" link both navigated to the same parent page, dropped the redundant link and moved the breadcrumb into its old position (top of the article body) instead of the hero title block.
  • That move also fixes a mobile overflow bug from Add breadcrumbs to blog, changelog, and customer stories #5668: a long post title in the breadcrumb, when placed in the hero's flex row, pushed the page wider than the viewport (confirmed live on production: 520px rendered in a 375px viewport).
  • Fixed Breadcrumbs.vue so only the active (last) crumb truncates on overflow, instead of every crumb, including short ones like "Blog", shrinking evenly.

Checklist

  • I have read the contribution guidelines
  • I have considered the performance impact of these changes
  • Suitable unit/system level tests have been added and they pass
  • Documentation has been updated
  • For blog PRs, an Art Request has been created (instructions)

@sumitshinde-84 sumitshinde-84 changed the title Replace back-to links with breadcrumbs on blog, changelog, customer stories Replace back-links with breadcrumbs, fix truncation Aug 27, 2026
@sumitshinde-84 sumitshinde-84 changed the title Replace back-links with breadcrumbs, fix truncation Replace back-links with breadcrumbs, fix truncation and remove duplication Aug 27, 2026
…tories

The breadcrumb and the "Back to X" link both navigated to the same
parent page. Drop the redundant link and move the breadcrumb into its
position instead of the hero title block, which also fixes a mobile
overflow bug where a long post title in the breadcrumb pushed the page
wider than the viewport. Also fix Breadcrumbs.vue so only the active
(last) crumb truncates, instead of every crumb shrinking evenly.
@sumitshinde-84
sumitshinde-84 force-pushed the fix/breadcrumb-mobile-overflow branch from 17236de to 517eb47 Compare August 27, 2026 20:23
@netlify

netlify Bot commented Aug 27, 2026

Copy link
Copy Markdown

Deploy Preview for flowforge-website ready!

Name Link
🔨 Latest commit 2e2201f
🔍 Latest deploy log https://app.netlify.com/projects/flowforge-website/deploys/6a909aeeda9b150008e7066c
😎 Deploy Preview https://deploy-preview-5697--flowforge-website.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 71 (🟢 up 20 from production)
Accessibility: 96 (no change from production)
Best Practices: 100 (no change from production)
SEO: 85 (no change from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

@n-lark n-lark left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey! I pushed up a fix for the breadcrumbs. The shrink-0 change introduced an overflow on docs pages, where we can be nested 4 layers deep, ex docs/install/kubernetes/aws-terraform/. The leading crumbs couldn't shrink, so they ran past the viewport and pushed the page title crumb off-screen. Made it so all but the first item can truncate.

Def could do another iteration where we collapse the middle crumbs — like Docs / … / … / AWS EKS Installation instead of shrinking every layer, but this will get the job done.

@n-lark
n-lark enabled auto-merge August 27, 2026 20:47
@netlify

netlify Bot commented Aug 27, 2026

Copy link
Copy Markdown

Deploy Preview for flowforge-website ready!

Name Link
🔨 Latest commit 517eb47
🔍 Latest deploy log https://app.netlify.com/projects/flowforge-website/deploys/6a909cdc1a3e6200081faaa1
😎 Deploy Preview https://deploy-preview-5697--flowforge-website.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 57 (🟢 up 6 from production)
Accessibility: 96 (no change from production)
Best Practices: 100 (no change from production)
SEO: 85 (no change from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented Aug 27, 2026

Copy link
Copy Markdown

Deploy Preview for flowforge-website ready!

Name Link
🔨 Latest commit 3d697f2
🔍 Latest deploy log https://app.netlify.com/projects/flowforge-website/deploys/6a90a14ad2f7b00008a0c632
😎 Deploy Preview https://deploy-preview-5697--flowforge-website.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 61 (🟢 up 10 from production)
Accessibility: 96 (no change from production)
Best Practices: 100 (no change from production)
SEO: 85 (no change from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

@n-lark
n-lark merged commit c0a3f9c into main Aug 27, 2026
7 checks passed
@n-lark
n-lark deleted the fix/breadcrumb-mobile-overflow branch August 27, 2026 21:34
@sumitshinde-84

Copy link
Copy Markdown
Contributor Author

Thanks @n-lark 🙌 !

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 this pull request may close these issues.

2 participants