moby/brewlog
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(bags): hide button labels on narrow bag cards

Browse source 
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.
This commit is contained in:
Jon Seager 2026-02-08 09:16:02 +00:00
parent d60133b585
commit 4d3c4657d8
No known key found for this signature in database
1 changed files with 4 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
templates/partials/bag_card.html
View file

@ -14,11 +14,12 @@
</div> </div>
</div> </div>
{% if is_authenticated %} {% 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 }}" <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"> 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") }} {{ icons::beaker("h-4 w-4") }}
Brew <span class="hidden @[10rem]:inline">Brew</span>
</a> </a>
<button <button
type="button" type="button"
@ -27,7 +28,7 @@
onclick="closeBag('{{ bag.id }}', document.getElementById('bag-card-{{ bag.id }}'))" onclick="closeBag('{{ bag.id }}', document.getElementById('bag-card-{{ bag.id }}'))"
> >
{{ icons::x_mark("h-4 w-4") }} {{ icons::x_mark("h-4 w-4") }}
Close <span class="hidden @[10rem]:inline">Close</span>
</button> </button>
</div> </div>
{% endif %} {% endif %}