From 92b20396af4334bc5709873c6b1ac83a3b3c3e28 Mon Sep 17 00:00:00 2001
From: Jon Seager <jon@sgrs.uk>
Date: Mon, 9 Feb 2026 20:24:57 +0000
Subject: [PATCH] fix(ui): improve mobile card layout for list views

Right-align values in mobile card cells while keeping labels left-aligned.
Move tasting notes to a label-free strip at the bottom of roast cards.
---
 static/css/input.css                     | 15 +++++++++++++++
 templates/partials/lists/roast_list.html |  6 ++----
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/static/css/input.css b/static/css/input.css
index e62d289..295171a 100644
--- a/static/css/input.css
+++ b/static/css/input.css
@@ -584,6 +584,7 @@ input.input-field[type="number"] {
     padding: 0.25rem 0;
     white-space: normal;
     font-size: 0.875rem;
+    text-align: end;
     border: none !important;
   }
 
@@ -595,6 +596,7 @@ input.input-field[type="number"] {
     font-weight: 500;
     color: var(--text-secondary);
     margin-right: 0.75rem;
+    text-align: start;
   }
 
   .responsive-table td[data-label=""]::before {
@@ -643,6 +645,19 @@ input.input-field[type="number"] {
     margin-right: 0.5rem;
   }
 
+  /* Tasting notes: bottom strip, no label, left-aligned pills */
+  .responsive-table td.card-notes {
+    order: 98;
+    display: flex;
+    justify-content: flex-start;
+    text-align: start;
+    padding-top: 0.5rem !important;
+  }
+
+  .responsive-table td.card-notes::before {
+    display: none;
+  }
+
   /* Actions: absolute top-right in header area */
   .responsive-table td.card-actions {
     order: -1;
diff --git a/templates/partials/lists/roast_list.html b/templates/partials/lists/roast_list.html
index fd3bc3a..ef57603 100644
--- a/templates/partials/lists/roast_list.html
+++ b/templates/partials/lists/roast_list.html
@@ -94,11 +94,9 @@
                     {{ roast.producer }}
                   </td>
                 {% endif %}
-                <td data-label="Tasting Notes" class="px-4 py-3">
+                <td data-label="Tasting Notes" class="card-notes px-4 py-3">
                   {% if !roast.tasting_notes.is_empty() %}
-                    <div
-                      class="flex flex-wrap gap-1 md:justify-start justify-end"
-                    >
+                    <div class="flex flex-wrap gap-1">
                       {% for note in roast.tasting_notes %}
                         <span class="{{ note.pill_class }}"
                           >{{ note.label }}</span