From 650ba66a16688d78183f7ff6cf1cb568d1edfad2 Mon Sep 17 00:00:00 2001
From: "posthog-eu[bot]" <226701856+posthog-eu[bot]@users.noreply.github.com>
Date: Thu, 6 Aug 2026 16:59:54 +0000
Subject: [PATCH] fix(frontend): make breadcrumb links fill the header row

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
---
 src/components/Navbar.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 35f52bbb51..a4590bc15f 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -67,10 +67,18 @@ const { t } = useI18n()
                 <ol class="inline-flex items-center space-x-1">
                   <li v-for="(breadcrumb, i) in displayStore.pathTitle" :key="i" class="flex items-center">
                     <span v-if="i > 0" class="mx-1" aria-hidden="true"> / </span>
+                    <!-- Last crumb points at the current route, so render it as plain text rather than a dead link -->
+                    <span
+                      v-if="i === displayStore.pathTitle.length - 1"
+                      class="flex items-center h-16 px-2 font-bold text-slate-600 dark:text-slate-100"
+                      aria-current="page"
+                    >
+                      {{ breadcrumb.translate === false ? breadcrumb.name : t(breadcrumb.name) }}
+                    </span>
                     <router-link
+                      v-else
                       :to="breadcrumb.path"
-                      class="px-1 rounded-sm hover:underline focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:outline-none"
-                      :class="i === displayStore.pathTitle.length - 1 ? 'font-bold text-slate-600 dark:text-slate-100' : ''"
+                      class="flex items-center h-16 px-2 rounded-sm underline underline-offset-2 decoration-slate-400/60 hover:decoration-slate-600 hover:text-slate-800 dark:decoration-slate-500 dark:hover:decoration-slate-300 dark:hover:text-white focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 focus:outline-none"
                     >
                       {{ breadcrumb.translate === false ? breadcrumb.name : t(breadcrumb.name) }}
                     </router-link>