Fix backfill progress layout - wider card, no text wrapping

This commit is contained in:
Graham McIntire 2026-04-06 09:02:32 -05:00
parent 95d7fc0c39
commit bb32e12c6a
No known key found for this signature in database
GPG key ID: F4ABF488E6029E59

View file

@ -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">