graham/prop
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix backfill stat overflow and select text alignment

Browse source 
- Revert enrichment status cards from daisyUI stat to plain containers
  (tabular status rows don't fit the stat component's layout)
- Add overflow-hidden to DB stat cards for large numbers
- Fix select text centering with display:flex + align-items:center
This commit is contained in:
Graham McIntire 2026-04-12 09:31:39 -05:00
parent ccd8aba653
commit e0be0587be
2 changed files with 15 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
assets/css/app.css
View file

@ -110,7 +110,8 @@
and misaligned text. Reset them so text sits centered like <input>. */
select.select {
margin: 0;
padding-block: 0;
display: flex;
align-items: center;
}
/* Markdown rendered content — uses daisyUI theme variables for auto dark/light */

28
lib/microwaveprop_web/live/backfill_live.ex
View file

@ -333,7 +333,7 @@ defmodule MicrowavepropWeb.BackfillLive do
</.header>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 my-6">
<div class="stat bg-base-200 rounded-box md:col-span-2">
<div class="stat bg-base-200 rounded-box overflow-hidden md:col-span-2">
<div class="stat-title">Enrichment Progress</div>
<div class="stat-value text-2xl">
{format_number(@unprocessed.complete)} / {format_number(@unprocessed.total)}
@ -462,41 +462,39 @@ defmodule MicrowavepropWeb.BackfillLive do
<h2 class="text-base font-semibold mb-2">Enrichment Status by Type</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
<%= for {type, label} <- [{"hrrr", "HRRR"}, {"weather", "Weather"}, {"terrain", "Terrain"}, {"iemre", "IEMRE"}, {"era5", "ERA5"}] do %>
<div class="stat bg-base-200 rounded-box">
<div class="stat-title">{label}</div>
<div class="stat-desc mt-1">
<%= for {status, count} <- Map.get(@db_stats.statuses, type, []) do %>
<div class="flex justify-between">
<span class={status_class(status)}>{status}</span>
<span class="font-mono">{format_number(count)}</span>
</div>
<% end %>
</div>
<div class="bg-base-200 rounded-box p-3 text-xs">
<div class="font-semibold mb-1">{label}</div>
<%= for {status, count} <- Map.get(@db_stats.statuses, type, []) do %>
<div class="flex justify-between">
<span class={status_class(status)}>{status}</span>
<span class="font-mono">{format_number(count)}</span>
</div>
<% end %>
</div>
<% end %>
</div>
<h2 class="text-base font-semibold mb-2">Database</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
<div class="stat bg-base-200 rounded-box">
<div class="stat bg-base-200 rounded-box overflow-hidden">
<div class="stat-title">Total DB Size</div>
<div class="stat-value text-2xl font-mono">{@db_stats.db_size}</div>
</div>
<div class="stat bg-base-200 rounded-box">
<div class="stat bg-base-200 rounded-box overflow-hidden">
<div class="stat-title">HRRR Profiles</div>
<div class="stat-value text-2xl font-mono">
{format_number(@db_stats.totals.hrrr_profiles)}
</div>
<div class="stat-desc">{@db_stats.averages.hrrr_per_contact} per contact</div>
</div>
<div class="stat bg-base-200 rounded-box">
<div class="stat bg-base-200 rounded-box overflow-hidden">
<div class="stat-title">Surface Observations</div>
<div class="stat-value text-2xl font-mono">
{format_number(@db_stats.totals.surface_observations)}
</div>
<div class="stat-desc">{@db_stats.averages.obs_per_contact} per contact</div>
</div>
<div class="stat bg-base-200 rounded-box">
<div class="stat bg-base-200 rounded-box overflow-hidden">
<div class="stat-title">Soundings</div>
<div class="stat-value text-2xl font-mono">
{format_number(@db_stats.totals.soundings)}