From 2473e1f3772ec91296c55a418ff7f3e06976a8e0 Mon Sep 17 00:00:00 2001
From: Jon Seager <jon@sgrs.uk>
Date: Mon, 9 Feb 2026 20:20:12 +0000
Subject: [PATCH] fix(templates): wrap flag and country in span for correct
 mobile flex layout

The flag emoji and country name were separate flex items inside mobile
card td cells, causing the flag to float away from the country text.
Wrapping them in a single span keeps them together as one flex item.
---
 templates/pages/roaster.html               |  8 +++++---
 templates/partials/detail_cards.html       | 16 ++++++++++------
 templates/partials/lists/cafe_list.html    | 16 ++++++++++------
 templates/partials/lists/roast_list.html   |  8 +++++---
 templates/partials/lists/roaster_list.html | 16 ++++++++++------
 5 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/templates/pages/roaster.html b/templates/pages/roaster.html
index 6f75d35..54e7ee5 100644
--- a/templates/pages/roaster.html
+++ b/templates/pages/roaster.html
@@ -33,9 +33,11 @@
         <div>
           <dt class="text-text-muted">Country</dt>
           <dd class="font-medium text-text">
-            {% if !roaster.country_flag.is_empty() %}
-              <span class="mr-1">{{ roaster.country_flag }}</span>
-            {% endif %}{{ roaster.country }}
+            <span
+              >{% if !roaster.country_flag.is_empty() %}
+                <span class="mr-1">{{ roaster.country_flag }}</span>
+              {% endif %}{{ roaster.country }}</span
+            >
           </dd>
         </div>
         {% if let Some(c) = roaster.city %}
diff --git a/templates/partials/detail_cards.html b/templates/partials/detail_cards.html
index 6b716ff..109442a 100644
--- a/templates/partials/detail_cards.html
+++ b/templates/partials/detail_cards.html
@@ -62,9 +62,11 @@
         <div>
           <dt class="text-text-muted">Origin</dt>
           <dd class="font-medium text-text">
-            {% if !origin_flag.is_empty() %}
-              <span class="mr-1">{{ origin_flag }}</span>
-            {% endif %}{{ origin }}
+            <span
+              >{% if !origin_flag.is_empty() %}
+                <span class="mr-1">{{ origin_flag }}</span>
+              {% endif %}{{ origin }}</span
+            >
           </dd>
         </div>
       {% endif %}
@@ -204,9 +206,11 @@
       <div>
         <dt class="text-text-muted">Country</dt>
         <dd class="font-medium text-text">
-          {% if !country_flag.is_empty() %}
-            <span class="mr-1">{{ country_flag }}</span>
-          {% endif %}{{ country }}
+          <span
+            >{% if !country_flag.is_empty() %}
+              <span class="mr-1">{{ country_flag }}</span>
+            {% endif %}{{ country }}</span
+          >
         </dd>
       </div>
       {% if let Some(c) = city %}
diff --git a/templates/partials/lists/cafe_list.html b/templates/partials/lists/cafe_list.html
index 82184c6..72c4473 100644
--- a/templates/partials/lists/cafe_list.html
+++ b/templates/partials/lists/cafe_list.html
@@ -71,9 +71,11 @@
                   data-label="Location"
                   class="px-4 py-3 whitespace-nowrap md:hidden"
                 >
-                  {% if !cafe.country_flag.is_empty() %}
-                    <span class="mr-1">{{ cafe.country_flag }}</span>
-                  {% endif %}{{ cafe.country }}
+                  <span
+                    >{% if !cafe.country_flag.is_empty() %}
+                      <span class="mr-1">{{ cafe.country_flag }}</span>
+                    {% endif %}{{ cafe.country }}</span
+                  >
                 </td>
                 <td
                   data-label="City"
@@ -85,9 +87,11 @@
                   data-label="Country"
                   class="mobile-hidden px-4 py-3 whitespace-nowrap"
                 >
-                  {% if !cafe.country_flag.is_empty() %}
-                    <span class="mr-1">{{ cafe.country_flag }}</span>
-                  {% endif %}{{ cafe.country }}
+                  <span
+                    >{% if !cafe.country_flag.is_empty() %}
+                      <span class="mr-1">{{ cafe.country_flag }}</span>
+                    {% endif %}{{ cafe.country }}</span
+                  >
                 </td>
                 <td
                   data-label="City"
diff --git a/templates/partials/lists/roast_list.html b/templates/partials/lists/roast_list.html
index 49e9194..fd3bc3a 100644
--- a/templates/partials/lists/roast_list.html
+++ b/templates/partials/lists/roast_list.html
@@ -75,9 +75,11 @@
                   {{ roast.roaster_label }}
                 </td>
                 <td data-label="Origin" class="px-4 py-3 whitespace-nowrap">
-                  {% if !roast.origin_flag.is_empty() %}
-                    <span class="mr-1">{{ roast.origin_flag }}</span>
-                  {% endif %}{{ roast.origin }}
+                  <span
+                    >{% if !roast.origin_flag.is_empty() %}
+                      <span class="mr-1">{{ roast.origin_flag }}</span>
+                    {% endif %}{{ roast.origin }}</span
+                  >
                   {% if !roast.producer.is_empty() %}
                     <div class="hidden md:block text-xs text-text-muted">
                       {{ roast.producer }}
diff --git a/templates/partials/lists/roaster_list.html b/templates/partials/lists/roaster_list.html
index 5ef54e9..0a7d0b5 100644
--- a/templates/partials/lists/roaster_list.html
+++ b/templates/partials/lists/roaster_list.html
@@ -71,9 +71,11 @@
                   data-label="Location"
                   class="px-4 py-3 whitespace-nowrap md:hidden"
                 >
-                  {% if !roaster.country_flag.is_empty() %}
-                    <span class="mr-1">{{ roaster.country_flag }}</span>
-                  {% endif %}{{ roaster.country }}
+                  <span
+                    >{% if !roaster.country_flag.is_empty() %}
+                      <span class="mr-1">{{ roaster.country_flag }}</span>
+                    {% endif %}{{ roaster.country }}</span
+                  >
                 </td>
                 {% if !roaster.city.is_empty() %}
                   <td
@@ -87,9 +89,11 @@
                   data-label="Country"
                   class="mobile-hidden px-4 py-3 whitespace-nowrap"
                 >
-                  {% if !roaster.country_flag.is_empty() %}
-                    <span class="mr-1">{{ roaster.country_flag }}</span>
-                  {% endif %}{{ roaster.country }}
+                  <span
+                    >{% if !roaster.country_flag.is_empty() %}
+                      <span class="mr-1">{{ roaster.country_flag }}</span>
+                    {% endif %}{{ roaster.country }}</span
+                  >
                 </td>
                 <td
                   data-label="City"