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

fix(home): truncate long names in brew and bag cards

Browse source 
Add text truncation with ellipsis to roast and roaster names in the
recent brews and open bags cards to prevent layout inconsistency when
titles wrap.
This commit is contained in:
Jon Seager 2026-02-04 17:43:36 +00:00
parent 91a9900c24
commit 37cd595c93
No known key found for this signature in database
2 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
templates/home.html
View file

@ -191,10 +191,10 @@
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 items-start gap-4">
{% for brew in recent_brews %}
<div class="rounded-lg border border-amber-200 bg-amber-50 px-4 pt-4 pb-3 shadow-sm">
<div>
<a href="/roasters/{{ brew.roaster_slug }}/roasts/{{ brew.roast_slug }}" class="font-semibold text-amber-800 hover:text-amber-600">{{ brew.roast_name }}</a>
<p class="text-sm text-stone-500">{{ brew.roaster_name }}</p>
<div class="rounded-lg border border-amber-200 bg-amber-50 px-4 pt-4 pb-3 shadow-sm min-w-0">
<div class="min-w-0">
<a href="/roasters/{{ brew.roaster_slug }}/roasts/{{ brew.roast_slug }}" class="block truncate font-semibold text-amber-800 hover:text-amber-600">{{ brew.roast_name }}</a>
<p class="truncate text-sm text-stone-500">{{ brew.roaster_name }}</p>
</div>
<div class="mt-2 space-y-0.5 text-sm">
<p><span class="font-medium text-stone-800">{{ brew.coffee_weight }} / {{ brew.water_volume }}</span> <span class="text-stone-500">· {{ brew.ratio }} · {{ brew.water_temp }}</span></p>

6
templates/partials/bag_card.html
View file

@ -1,9 +1,9 @@
{% import "partials/icons.html" as icons %}
{% macro card(bag, is_authenticated) %}
<div id="bag-card-{{ bag.id }}" class="rounded-lg border border-amber-200 bg-amber-50 p-4 shadow-sm">
<div>
<a href="/roasters/{{ bag.roaster_slug }}/roasts/{{ bag.roast_slug }}" class="font-semibold text-amber-800 hover:text-amber-600">{{ bag.roast_name }}</a>
<p class="text-sm text-stone-500">{{ bag.roaster_name }}</p>
<div class="min-w-0">
<a href="/roasters/{{ bag.roaster_slug }}/roasts/{{ bag.roast_slug }}" class="block truncate font-semibold text-amber-800 hover:text-amber-600">{{ bag.roast_name }}</a>
<p class="truncate text-sm text-stone-500">{{ bag.roaster_name }}</p>
</div>
<p class="mt-2 text-sm text-stone-600">
<span class="font-medium">{{ bag.remaining }}g</span>