From d9ec8a91c335f24b53260fc0028fa83988b5c43e Mon Sep 17 00:00:00 2001
From: Graham McIntire <graham@mcintire.me>
Date: Tue, 14 Apr 2026 16:59:31 -0500
Subject: [PATCH] Stop HRRR badge from wrapping mid-phrase on the contact page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../live/contact_live/show.ex                 | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/lib/microwaveprop_web/live/contact_live/show.ex b/lib/microwaveprop_web/live/contact_live/show.ex
index bd6618a5..b40a4676 100644
--- a/lib/microwaveprop_web/live/contact_live/show.ex
+++ b/lib/microwaveprop_web/live/contact_live/show.ex
@@ -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