Skip to content

fix(frontend): make breadcrumb links fill the header row - #2897

Draft
posthog-eu[bot] wants to merge 1 commit into
mainfrom
posthog-self-driving/fixfrontend-make-breadcrumb-links-4853f4
Draft

fix(frontend): make breadcrumb links fill the header row#2897
posthog-eu[bot] wants to merge 1 commit into
mainfrom
posthog-self-driving/fixfrontend-make-breadcrumb-links-4853f4

Conversation

@posthog-eu

@posthog-eu posthog-eu Bot commented Aug 6, 2026

Copy link
Copy Markdown

Summary

The breadcrumb header renders on every app page as a 64px-tall bar, but only the small crumb text was clickable — the crumbs were bare inline <router-link>s (px-1, no vertical padding) sitting in an h-16 row, leaving most of the bar as dead space that looks like navigation. A second target was dead by construction: the last crumb linked to the route you're already on, so that click could never do anything.

  • Who it hurts: 375 dead clicks landing on the bare breadcrumb container across 282 sessions and 201 distinct users over 60 days. Nothing is blocked — users route around it — but it's continuous "is this broken?" friction on every app page.
  • Root cause is one row up from where the original signal pointed. The "Bundles" tab itself works fine; the failure is the breadcrumb bar above it.

Test plan

  1. Open any app page (e.g. /app/<app>/bundles) on desktop (lg breakpoint).
  2. Hover the breadcrumb bar — parent crumbs now read as links (persistent underline) before you interact.
  3. Click anywhere in the full height of a parent crumb (not just the text baseline) — navigation fires.
  4. Confirm the final crumb is plain text with no link/pointer and no navigation on click.

Verification scope: change is a deterministic Tailwind layout adjustment; eslint and vue-tsc are clean for Navbar.vue. A live session reproduction wasn't run — the app page requires backend auth not available in this environment.

Screenshots

Mechanism:

Before After
Crumb = <router-link px-1 text-sm> — hit target ≈ text height, thin strip centered in a 64px bar Crumb = flex items-center h-16 px-2 — hit target fills the full row height
Last crumb is a <router-link> to the current route → dead click Last crumb is a plain <span aria-current="page"> → no dead target
hover:underline only — no affordance until you try Persistent underline so crumbs read as links up front

Checklist

  • My code follows the code style of this project and passes
    bun run lint:backend && bun run lint.
  • My change requires a change to the documentation.
  • I have updated the documentation
    accordingly.
  • My change has adequate E2E test coverage.
  • I have tested my code manually, and I have provided steps how to reproduce
    my tests

Created with PostHog Desktop from this inbox report.


View with [code]smith Autofix with [code]smith
Need help on this PR? Tag @codesmith-bot with what you need. Autofix is disabled.

Review in cubic

The breadcrumb bar in Navbar.vue is 64px tall but each crumb was bare
inline text (px-1, no vertical padding), so most of the bar was dead
space that looked like navigation. The final crumb was also a
router-link pointing at the current route, so clicking it did nothing.

- Give each clickable crumb an h-16 px-2 hit target so it fills the full
  height of the header row instead of a thin strip of text.
- Render the last crumb as a plain span (aria-current="page") since a
  link to the current route is a no-op by construction.
- Add a persistent underline affordance so crumbs read as links before
  hover.

Generated-By: PostHog Code
Task-Id: 40a34baf-3ba0-485f-92c7-447ee1cdaac4
@sonarqubecloud

sonarqubecloud Bot commented Aug 6, 2026

Copy link
Copy Markdown

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.

0 participants