Replace back-links with breadcrumbs, fix truncation and remove duplication - #5697
Conversation
…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.
17236de to
517eb47
Compare
✅ Deploy Preview for flowforge-website ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
… fit instead of overflowing
n-lark
left a comment
There was a problem hiding this comment.
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.
✅ Deploy Preview for flowforge-website ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for flowforge-website ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Thanks @n-lark 🙌 ! |

Summary
flexrow, pushed the page wider than the viewport (confirmed live on production: 520px rendered in a 375px viewport).Breadcrumbs.vueso only the active (last) crumb truncates on overflow, instead of every crumb, including short ones like "Blog", shrinking evenly.Checklist