From bb32e12c6a757c587bf2011635b938466e1a7af9 Mon Sep 17 00:00:00 2001
From: Graham McIntire <graham@mcintire.me>
Date: Mon, 6 Apr 2026 09:02:32 -0500
Subject: [PATCH] Fix backfill progress layout - wider card, no text wrapping

---
 lib/microwaveprop_web/live/backfill_live.ex | 67 ++++++---------------
 1 file changed, 19 insertions(+), 48 deletions(-)

diff --git a/lib/microwaveprop_web/live/backfill_live.ex b/lib/microwaveprop_web/live/backfill_live.ex
index 979d84b3..505ce991 100644
--- a/lib/microwaveprop_web/live/backfill_live.ex
+++ b/lib/microwaveprop_web/live/backfill_live.ex
@@ -287,55 +287,26 @@ defmodule MicrowavepropWeb.BackfillLive do
         <:subtitle>Enqueue and monitor contact enrichment jobs</:subtitle>
       </.header>
 
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 my-6">
-        <div class="bg-base-200 rounded-box p-4">
+      <div class="grid grid-cols-1 md:grid-cols-4 gap-4 my-6">
+        <div class="bg-base-200 rounded-box p-4 md:col-span-2">
           <div class="text-xs opacity-60">Enrichment Progress</div>
-          <div class="text-2xl font-bold">{@unprocessed.complete} / {@unprocessed.total} fully enriched</div>
-          <div class="flex flex-col gap-1 mt-2">
-            <div class="flex items-center gap-2 text-xs">
-              <span class="w-16">HRRR</span>
-              <progress
-                class="progress progress-primary flex-1"
-                value={@unprocessed.total - @unprocessed.hrrr}
-                max={@unprocessed.total}
-              />
-              <span class="w-20 text-right font-mono opacity-60">
-                {format_number(@unprocessed.total - @unprocessed.hrrr)} / {format_number(@unprocessed.total)}
-              </span>
-            </div>
-            <div class="flex items-center gap-2 text-xs">
-              <span class="w-16">Weather</span>
-              <progress
-                class="progress progress-primary flex-1"
-                value={@unprocessed.total - @unprocessed.weather}
-                max={@unprocessed.total}
-              />
-              <span class="w-20 text-right font-mono opacity-60">
-                {format_number(@unprocessed.total - @unprocessed.weather)} / {format_number(@unprocessed.total)}
-              </span>
-            </div>
-            <div class="flex items-center gap-2 text-xs">
-              <span class="w-16">Terrain</span>
-              <progress
-                class="progress progress-primary flex-1"
-                value={@unprocessed.total - @unprocessed.terrain}
-                max={@unprocessed.total}
-              />
-              <span class="w-20 text-right font-mono opacity-60">
-                {format_number(@unprocessed.total - @unprocessed.terrain)} / {format_number(@unprocessed.total)}
-              </span>
-            </div>
-            <div class="flex items-center gap-2 text-xs">
-              <span class="w-16">IEMRE</span>
-              <progress
-                class="progress progress-primary flex-1"
-                value={@unprocessed.total - @unprocessed.iemre}
-                max={@unprocessed.total}
-              />
-              <span class="w-20 text-right font-mono opacity-60">
-                {format_number(@unprocessed.total - @unprocessed.iemre)} / {format_number(@unprocessed.total)}
-              </span>
-            </div>
+          <div class="text-2xl font-bold">
+            {format_number(@unprocessed.complete)} / {format_number(@unprocessed.total)} fully enriched
+          </div>
+          <div class="flex flex-col gap-1.5 mt-3">
+            <%= for {label, remaining} <- [{"HRRR", @unprocessed.hrrr}, {"Weather", @unprocessed.weather}, {"Terrain", @unprocessed.terrain}, {"IEMRE", @unprocessed.iemre}] do %>
+              <div class="flex items-center gap-2 text-xs">
+                <span class="w-14 shrink-0">{label}</span>
+                <progress
+                  class="progress progress-primary flex-1 min-w-0"
+                  value={@unprocessed.total - remaining}
+                  max={@unprocessed.total}
+                />
+                <span class="shrink-0 font-mono opacity-60 whitespace-nowrap">
+                  {format_number(@unprocessed.total - remaining)} / {format_number(@unprocessed.total)}
+                </span>
+              </div>
+            <% end %>
           </div>
         </div>
         <div class="bg-base-200 rounded-box p-4">