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>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 items-start gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 items-start gap-4">
{% for brew in recent_brews %} {% 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 class="rounded-lg border border-amber-200 bg-amber-50 px-4 pt-4 pb-3 shadow-sm min-w-0">
<div> <div class="min-w-0">
<a href="/roasters/{{ brew.roaster_slug }}/roasts/{{ brew.roast_slug }}" class="font-semibold text-amber-800 hover:text-amber-600">{{ brew.roast_name }}</a> <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="text-sm text-stone-500">{{ brew.roaster_name }}</p> <p class="truncate text-sm text-stone-500">{{ brew.roaster_name }}</p>
</div> </div>
<div class="mt-2 space-y-0.5 text-sm"> <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> <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 %} {% import "partials/icons.html" as icons %}
{% macro card(bag, is_authenticated) %} {% 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 id="bag-card-{{ bag.id }}" class="rounded-lg border border-amber-200 bg-amber-50 p-4 shadow-sm">
<div> <div class="min-w-0">
<a href="/roasters/{{ bag.roaster_slug }}/roasts/{{ bag.roast_slug }}" class="font-semibold text-amber-800 hover:text-amber-600">{{ bag.roast_name }}</a> <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="text-sm text-stone-500">{{ bag.roaster_name }}</p> <p class="truncate text-sm text-stone-500">{{ bag.roaster_name }}</p>
</div> </div>
<p class="mt-2 text-sm text-stone-600"> <p class="mt-2 text-sm text-stone-600">
<span class="font-medium">{{ bag.remaining }}g</span> <span class="font-medium">{{ bag.remaining }}g</span>