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

Stop HRRR badge from wrapping mid-phrase on the contact page

Browse source 
The atmospheric profile header was a single-line flex row with no
wrap, so on narrower viewports the HRRR (3 km) badge and the unit
suffixes were breaking mid-phrase — the badge showed "HRRR (3 /
km)" with borders crossing through the text. Add flex-wrap plus
whitespace-nowrap on each cell so the whole row wraps cleanly
onto a second line instead of shrinking each cell vertically.
This commit is contained in:
Graham McIntire 2026-04-14 16:59:31 -05:00
parent 63f2eca27f
commit d9ec8a91c3
No known key found for this signature in database
GPG key ID: F4ABF488E6029E59
1 changed files with 15 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
lib/microwaveprop_web/live/contact_live/show.ex
View file

@ -1134,18 +1134,24 @@ defmodule MicrowavepropWeb.ContactLive.Show do
phx-click="toggle_hrrr_profile"
class="w-full flex items-center justify-between p-4 hover:bg-base-200 transition-colors"
>
<div class="flex items-center gap-4 text-sm">
<span class="badge badge-outline badge-sm">{profile_source}</span>
<span class="font-semibold">
<div class="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm min-w-0">
<span class="badge badge-outline badge-sm whitespace-nowrap">{profile_source}</span>
<span class="font-semibold whitespace-nowrap">
{format_number(profile.lat)}°, {format_number(profile.lon)}°
</span>
<span>{Calendar.strftime(profile.valid_time, "%H:%M UTC")}</span>
<span>HPBL: {format_number(profile.hpbl_m)} m</span>
<span>PWAT: {format_number(profile.pwat_mm)} mm</span>
<span>N: {format_number(profile.surface_refractivity)}</span>
<span>dN/dh: {format_number(profile.min_refractivity_gradient)}</span>
<span class="whitespace-nowrap">
{Calendar.strftime(profile.valid_time, "%H:%M UTC")}
</span>
<span class="whitespace-nowrap">HPBL: {format_number(profile.hpbl_m)} m</span>
<span class="whitespace-nowrap">PWAT: {format_number(profile.pwat_mm)} mm</span>
<span class="whitespace-nowrap">
N: {format_number(profile.surface_refractivity)}
</span>
<span class="whitespace-nowrap">
dN/dh: {format_number(profile.min_refractivity_gradient)}
</span>
<%= if profile.ducting_detected do %>
<span class="badge badge-warning badge-sm">Ducting</span>
<span class="badge badge-warning badge-sm whitespace-nowrap">Ducting</span>
<% end %>
</div>
<.icon