From 2a66b0eb8abfe75f38c9956f417cafaa084247b8 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Tue, 19 May 2026 10:33:26 +0100
Subject: [PATCH] fix(topstrip): wrap breadcrumb-current in ClientOnly
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The breadcrumb's trailing span pulls its label from pageBreadcrumbTitle,
which pages set in script setup after a useFetch. SSR rendered the URL
slug there; client rendered the title; Vue logged a hydration text
mismatch on every detail page.

Wrap the last segment's span in ClientOnly with an nbsp fallback so the
SSR DOM stays the same shape but defers the text to the client. The
prior attempt at this in layouts/default.vue + layouts/admin.vue was
reverted on this branch — it changed segment counts and produced a
worse node-structure mismatch.
---
 app/components/TopStrip.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/components/TopStrip.vue b/app/components/TopStrip.vue
index bbf5f28..37a8aec 100644
--- a/app/components/TopStrip.vue
+++ b/app/components/TopStrip.vue
@@ -12,7 +12,12 @@
               class="breadcrumb-link"
               >{{ crumb.label }}</NuxtLink
             >
-            <span v-else class="breadcrumb-current">{{ crumb.label }}</span>
+            <ClientOnly v-else>
+              <span class="breadcrumb-current">{{ crumb.label }}</span>
+              <template #fallback>
+                <span class="breadcrumb-current">&nbsp;</span>
+              </template>
+            </ClientOnly>
           </template>
         </span>
       </slot>