From 4d3c4657d8fb49d35cd7421a4eed859dbc5bf0a4 Mon Sep 17 00:00:00 2001
From: Jon Seager <jon@sgrs.uk>
Date: Sun, 8 Feb 2026 09:16:02 +0000
Subject: [PATCH] style(bags): hide button labels on narrow bag cards

Use CSS container queries to show Brew/Close text labels only
when the button area is >= 10rem wide, going icon-only on
narrow mobile viewports.
---
 templates/partials/bag_card.html | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/templates/partials/bag_card.html b/templates/partials/bag_card.html
index d75fbe2..352cc9c 100644
--- a/templates/partials/bag_card.html
+++ b/templates/partials/bag_card.html
@@ -14,11 +14,12 @@
     </div>
   </div>
   {% if is_authenticated %}
-  <div class="mt-3 flex items-center gap-2">
+  <div class="@container mt-3 flex items-center gap-2">
     <a href="/add?type=brew&bag_id={{ bag.id }}"
+      title="Brew"
       class="flex-1 inline-flex h-8 items-center justify-center gap-1.5 rounded-md border px-2 text-sm font-medium text-accent transition hover:text-accent-hover hover:bg-surface-alt">
       {{ icons::beaker("h-4 w-4") }}
-      Brew
+      <span class="hidden @[10rem]:inline">Brew</span>
     </a>
     <button
       type="button"
@@ -27,7 +28,7 @@
       onclick="closeBag('{{ bag.id }}', document.getElementById('bag-card-{{ bag.id }}'))"
     >
       {{ icons::x_mark("h-4 w-4") }}
-      Close
+      <span class="hidden @[10rem]:inline">Close</span>
     </button>
   </div>
   {% endif %}