From 705144bcf7eeb05605d7d840310bb1733c1822fd Mon Sep 17 00:00:00 2001
From: Jon Seager <jon@sgrs.uk>
Date: Wed, 11 Feb 2026 09:05:58 +0000
Subject: [PATCH] fix: make detail page action buttons responsive on mobile

---
 templates/pages/bag.html             | 13 +++++++++----
 templates/partials/detail_cards.html |  8 +++++---
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/templates/pages/bag.html b/templates/pages/bag.html
index 25dc41f..7993d4d 100644
--- a/templates/pages/bag.html
+++ b/templates/pages/bag.html
@@ -112,21 +112,26 @@
     {# ── Actions ── #}
     <div class="grid gap-6 md:grid-cols-2">
       <div
-        class="rounded-lg border bg-surface p-5 md:col-span-2 flex items-center gap-2"
+        class="rounded-lg border bg-surface p-5 md:col-span-2 flex flex-col gap-2 sm:flex-row sm:items-center"
       >
-        {{ detail::edit_button(edit_url) }}
         {% if !bag.closed %}
           <button
             type="button"
-            class="inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-accent transition hover:text-text hover:bg-surface-alt"
+            class="inline-flex items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-accent transition hover:text-text hover:bg-surface-alt sm:flex-1"
             data-on:click="confirm('Close this bag? This will mark it as finished.') && @put('/api/v1/bags/{{ bag.id }}?closed=true&remaining=0')"
           >
             {{ icons::x_mark("h-4 w-4") }} Close Bag
           </button>
         {% endif %}
+        <a
+          href="{{ edit_url }}"
+          class="inline-flex items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-accent transition hover:bg-surface-alt sm:flex-1"
+        >
+          {{ icons::pencil("h-4 w-4") }} Edit
+        </a>
         <button
           type="button"
-          class="inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-error transition hover:bg-surface-alt"
+          class="inline-flex items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-error transition hover:bg-surface-alt sm:flex-1"
           data-on:click="confirm('Delete this bag? This cannot be undone.') && @delete('/api/v1/bags/{{ bag.id }}')"
         >
           {{ icons::delete("h-4 w-4") }} Delete
diff --git a/templates/partials/detail_cards.html b/templates/partials/detail_cards.html
index 0db14ae..3419c3d 100644
--- a/templates/partials/detail_cards.html
+++ b/templates/partials/detail_cards.html
@@ -179,16 +179,18 @@
 {% endmacro %}
 
 {% macro edit_delete_buttons(edit_url, entity_label, api_path, id) %}
-  <div class="rounded-lg border bg-surface p-5 flex items-center gap-2">
+  <div
+    class="rounded-lg border bg-surface p-5 flex flex-col gap-2 sm:flex-row sm:items-center"
+  >
     <a
       href="{{ edit_url }}"
-      class="inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-accent transition hover:bg-surface-alt"
+      class="inline-flex items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-accent transition hover:bg-surface-alt sm:flex-1"
     >
       {{ icons::pencil("h-4 w-4") }} Edit
     </a>
     <button
       type="button"
-      class="inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-error transition hover:bg-surface-alt"
+      class="inline-flex items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-error transition hover:bg-surface-alt sm:flex-1"
       data-on:click="confirm('Delete this {{ entity_label }}? This cannot be undone.') && @delete('{{ api_path }}/{{ id }}')"
     >
       {{ icons::delete("h-4 w-4") }} Delete