From 94c8bfaa0ae8dfba59368d042bf10ce8019c07be Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Wed, 27 May 2026 12:28:15 +0200
Subject: [PATCH] fix: keep wordmark from wrapping on narrow viewports
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two changes:
- Wordmark.vue now forces whitespace-nowrap on the outer frame and
  both inner spans, plus flex-nowrap on the row, so EARTH WALKER and
  DESIGN can never wrap inside the box regardless of the parent's
  width constraints.
- SiteHeader swaps to a plain serif "Earth Walker" wordmark below
  md: — at the actual mobile header width (viewport minus locale +
  theme + hamburger icons) the boxed mark would crowd to the point of
  illegibility even without wrapping. Full boxed Wordmark stays in
  the hero, the footer, and the mobile drawer where there's room.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/layout/SiteHeader.vue |  7 ++++++-
 src/components/layout/Wordmark.vue   | 16 +++++++++++++---
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/components/layout/SiteHeader.vue b/src/components/layout/SiteHeader.vue
index 4a546fa..354ba25 100644
--- a/src/components/layout/SiteHeader.vue
+++ b/src/components/layout/SiteHeader.vue
@@ -36,7 +36,12 @@ const mobileOpen = ref(false)
         class="text-foreground"
         :aria-label="t('brand')"
       >
-        <Wordmark size="sm" />
+        <span
+          class="font-serif text-sm font-semibold uppercase tracking-[0.22em] md:hidden"
+        >
+          Earth Walker
+        </span>
+        <Wordmark size="sm" class="hidden md:inline-flex" />
       </RouterLink>
 
       <nav class="hidden items-center gap-8 md:flex">
diff --git a/src/components/layout/Wordmark.vue b/src/components/layout/Wordmark.vue
index cd5b59b..e325f27 100644
--- a/src/components/layout/Wordmark.vue
+++ b/src/components/layout/Wordmark.vue
@@ -31,15 +31,25 @@ const designClasses: Record<Size, string> = {
 <template>
   <span
     :class="[
-      'inline-flex items-baseline border border-current uppercase',
+      'inline-flex flex-nowrap items-baseline whitespace-nowrap border border-current uppercase',
       frameClasses[props.size],
     ]"
     aria-label="Earth Walker Design"
   >
-    <span :class="['font-serif font-semibold', earthClasses[props.size]]">
+    <span
+      :class="[
+        'whitespace-nowrap font-serif font-semibold',
+        earthClasses[props.size],
+      ]"
+    >
       Earth Walker
     </span>
-    <span :class="['font-serif font-light opacity-90', designClasses[props.size]]">
+    <span
+      :class="[
+        'whitespace-nowrap font-serif font-light opacity-90',
+        designClasses[props.size],
+      ]"
+    >
       Design
     </span>
   </span>