diff --git a/templates/home.html b/templates/home.html
index 79b1452..c8fbc47 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -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>
diff --git a/templates/partials/bag_card.html b/templates/partials/bag_card.html
index 1450db9..501fbb2 100644
--- a/templates/partials/bag_card.html
+++ b/templates/partials/bag_card.html
@@ -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>