From 8bd0a9b7ad07ea21332ba0a2e1c92de53dc06aee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sun, 7 Jun 2026 12:50:41 +0200
Subject: [PATCH] UX fixes: scroll to top on nav, recipe chip order, caption
 cleanup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Disable HTMX scrollIntoViewOnBoost, scroll to true y=0 on afterSettle
  so breadcrumbs are never hidden under the sticky header
- Reorder recipe chips: Alcoholic → Category → Glass
- Remove "Photographed / House pour" caption below recipe image

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 assets/js/main.js           | 4 ++++
 layouts/partials/head.html  | 2 +-
 layouts/recipes/single.html | 9 ++++-----
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/assets/js/main.js b/assets/js/main.js
index 462515d..2c95340 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -180,3 +180,7 @@ document.addEventListener("htmx:afterSwap", () => {
   void main.offsetHeight;
   main.style.animation = "page-in 300ms ease-out";
 });
+
+document.addEventListener("htmx:afterSettle", () => {
+  window.scrollTo({ top: 0, behavior: "instant" });
+});
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 6b49b3c..5f48465 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -1,5 +1,5 @@
 <meta charset="utf-8" />
-<meta name="htmx-config" content='{"globalViewTransitions":true,"scrollBehavior":"smooth"}' />
+<meta name="htmx-config" content='{"globalViewTransitions":true,"scrollBehavior":"smooth","scrollIntoViewOnBoost":false}' />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <meta name="theme-color" content="#14100c" />
 
diff --git a/layouts/recipes/single.html b/layouts/recipes/single.html
index 3f68a68..a2a62d7 100644
--- a/layouts/recipes/single.html
+++ b/layouts/recipes/single.html
@@ -50,9 +50,8 @@
         {{- end -}}
       </div>
       <!-- Caption -->
-      <div class="flex justify-between pt-[14px] px-1 font-mono text-[11px] tracking-[0.1em] uppercase text-ink-mute">
+      <div class="pt-[14px] px-1 font-mono text-[11px] tracking-[0.1em] uppercase text-ink-mute">
         <span>{{ range $glasses }}{{ . }}{{ end }}</span>
-        <span class="text-gold">{{ if $img }}Photographed{{ else }}House pour{{ end }}</span>
       </div>
     </div>
 
@@ -69,12 +68,12 @@
         {{- with .Params.alcoholic -}}
           <span class="chip"><span class="dot"></span>{{ . }}</span>
         {{- end -}}
-        {{- range $glasses -}}
-          <a href="/glasses/{{ . | urlize }}/" class="chip"><span class="dot"></span>{{ . }}</a>
-        {{- end -}}
         {{- range $categories -}}
           <a href="/categories/{{ . | urlize }}/" class="chip"><span class="dot"></span>{{ . }}</a>
         {{- end -}}
+        {{- range $glasses -}}
+          <a href="/glasses/{{ . | urlize }}/" class="chip"><span class="dot"></span>{{ . }}</a>
+        {{- end -}}
       </div>
 
       <!-- Two columns: ingredients + method -->