From ffbaa6230f2f8cad3c3be3b253cc4f4836c3a288 Mon Sep 17 00:00:00 2001
From: Graham McIntire <graham@mcintire.me>
Date: Sun, 2 Aug 2026 12:30:37 -0500
Subject: [PATCH] smaller screen optimization on prop path calculation

---
 lib/microwaveprop_web/live/path_live.ex | 190 ++++++++++++------------
 1 file changed, 99 insertions(+), 91 deletions(-)

diff --git a/lib/microwaveprop_web/live/path_live.ex b/lib/microwaveprop_web/live/path_live.ex
index d0d2025f..59e4770d 100644
--- a/lib/microwaveprop_web/live/path_live.ex
+++ b/lib/microwaveprop_web/live/path_live.ex
@@ -523,7 +523,8 @@ defmodule MicrowavepropWeb.PathLive do
                 class="btn btn-sm btn-outline gap-1"
                 title="Use device GPS"
               >
-                <.icon name="hero-map-pin" class="size-3.5" /> My Location
+                <.icon name="hero-map-pin" class="size-3.5" />
+                <span class="hidden sm:inline">My Location</span>
               </button>
             </div>
           </div>
@@ -678,11 +679,11 @@ defmodule MicrowavepropWeb.PathLive do
       <div class="grid grid-cols-2 md:grid-cols-5 gap-3 text-sm">
         <div>
           <span class="opacity-60">Distance</span>
-          <div class="font-mono text-lg">{format_km_mi(@result.dist_km)}</div>
+          <div class="font-mono text-base sm:text-lg">{format_km_mi(@result.dist_km)}</div>
         </div>
         <div>
           <span class="opacity-60">Bearing</span>
-          <div class="font-mono text-lg">{format_number(@result.bearing)}&deg;</div>
+          <div class="font-mono text-base sm:text-lg">{format_number(@result.bearing)}&deg;</div>
         </div>
         <%= if @result.terrain do %>
           <div>
@@ -697,7 +698,10 @@ defmodule MicrowavepropWeb.PathLive do
         <%= if @result.scoring do %>
           <div>
             <span class="opacity-60">Propagation</span>
-            <div class="font-mono text-lg" style={"color: #{tier_color(@result.scoring.score)}"}>
+            <div
+              class="font-mono text-base sm:text-lg"
+              style={"color: #{tier_color(@result.scoring.score)}"}
+            >
               {@result.scoring.score}/100
             </div>
             <div class="text-xs" style={"color: #{tier_color(@result.scoring.score)}"}>
@@ -820,14 +824,16 @@ defmodule MicrowavepropWeb.PathLive do
           <div class="grid grid-cols-2 gap-x-6 gap-y-3">
             <div>
               <span class="text-xs opacity-60">Temperature</span>
-              <div class="font-mono text-xl">{format_number(@result.conditions.temp_f)}&deg;F</div>
+              <div class="font-mono text-lg sm:text-xl">
+                {format_number(@result.conditions.temp_f)}&deg;F
+              </div>
               <div class="font-mono text-xs opacity-50">
                 {format_number(@result.conditions.temp_c)}&deg;C
               </div>
             </div>
             <div>
               <span class="text-xs opacity-60">Dewpoint</span>
-              <div class="font-mono text-xl">
+              <div class="font-mono text-lg sm:text-xl">
                 {format_number(@result.conditions.dewpoint_f)}&deg;F
               </div>
               <div class="font-mono text-xs opacity-50">
@@ -836,37 +842,37 @@ defmodule MicrowavepropWeb.PathLive do
             </div>
             <div>
               <span class="text-xs opacity-60">T/Td Gap</span>
-              <div class="font-mono text-xl">
+              <div class="font-mono text-lg sm:text-xl">
                 {format_number(@result.conditions.temp_f - @result.conditions.dewpoint_f)}&deg;F
               </div>
             </div>
             <div>
               <span class="text-xs opacity-60">Abs Humidity</span>
-              <div class="font-mono text-xl">
+              <div class="font-mono text-lg sm:text-xl">
                 {format_number(@result.conditions.abs_humidity)} g/m&sup3;
               </div>
             </div>
             <div>
               <span class="text-xs opacity-60">Pressure</span>
-              <div class="font-mono text-xl">
+              <div class="font-mono text-lg sm:text-xl">
                 {format_number(@result.conditions.pressure_mb || 0)} mb
               </div>
             </div>
             <div>
               <span class="text-xs opacity-60">PWAT</span>
-              <div class="font-mono text-xl">
+              <div class="font-mono text-lg sm:text-xl">
                 {format_number(@result.conditions.pwat_mm || 0)} mm
               </div>
             </div>
             <div>
               <span class="text-xs opacity-60">BL Depth</span>
-              <div class="font-mono text-xl">
+              <div class="font-mono text-lg sm:text-xl">
                 {format_number(@result.conditions.bl_depth_m || 0)} m
               </div>
             </div>
             <div>
               <span class="text-xs opacity-60">Refrac Gradient</span>
-              <div class="font-mono text-xl">
+              <div class="font-mono text-lg sm:text-xl">
                 {format_number(@result.conditions.min_refractivity_gradient || 0)} N/km
               </div>
             </div>
@@ -1036,9 +1042,9 @@ defmodule MicrowavepropWeb.PathLive do
   defp ionosphere_readout(assigns) do
     ~H"""
     <div class="bg-base-200 rounded-box p-4 mb-6">
-      <div class="flex items-center justify-between mb-2">
+      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-2">
         <div class="text-xs opacity-60">Ionosphere &middot; Sporadic-E Potential</div>
-        <div class="text-[10px] opacity-50">
+        <div class="text-[10px] opacity-50 mt-1 sm:mt-0">
           {@readout.station_code} · {Calendar.strftime(@readout.valid_time, "%Y-%m-%d %H:%M UTC")}
         </div>
       </div>
@@ -1127,91 +1133,93 @@ defmodule MicrowavepropWeb.PathLive do
           {Phoenix.HTML.raw(@trend)}
         </div>
       </div>
-      <svg viewBox="0 0 1200 240" class="w-full aspect-[5/1]">
-        <%= for s <- [0, 25, 50, 75, 100] do %>
-          <% y = 20 + (100 - s) / 100 * 185 %>
-          <line
-            x1="55"
-            y1={y}
-            x2="1180"
-            y2={y}
-            stroke="currentColor"
-            class="opacity-10"
-            stroke-width="1"
+      <div class="overflow-x-auto">
+        <svg viewBox="0 0 1200 240" class="min-w-[720px] w-full h-auto">
+          <%= for s <- [0, 25, 50, 75, 100] do %>
+            <% y = 20 + (100 - s) / 100 * 185 %>
+            <line
+              x1="55"
+              y1={y}
+              x2="1180"
+              y2={y}
+              stroke="currentColor"
+              class="opacity-10"
+              stroke-width="1"
+            />
+            <text
+              x="48"
+              y={y + 5}
+              font-size="14"
+              text-anchor="end"
+              fill="currentColor"
+              class="opacity-40"
+            >
+              {s}
+            </text>
+          <% end %>
+          <polyline
+            points={@polyline}
+            fill="none"
+            stroke={tier_color(@best_pt.score)}
+            stroke-width="3"
+            stroke-linejoin="round"
+            stroke-linecap="round"
           />
-          <text
-            x="48"
-            y={y + 5}
-            font-size="14"
-            text-anchor="end"
-            fill="currentColor"
-            class="opacity-40"
-          >
-            {s}
-          </text>
-        <% end %>
-        <polyline
-          points={@polyline}
-          fill="none"
-          stroke={tier_color(@best_pt.score)}
-          stroke-width="3"
-          stroke-linejoin="round"
-          stroke-linecap="round"
-        />
-        <%= for pt <- @points do %>
+          <%= for pt <- @points do %>
+            <circle
+              cx={pt.x}
+              cy={pt.y}
+              r="6"
+              fill={tier_color(pt.score)}
+              data-iso={DateTime.to_iso8601(pt.valid_time)}
+              style="cursor:pointer;"
+            />
+          <% end %>
           <circle
-            cx={pt.x}
-            cy={pt.y}
-            r="6"
-            fill={tier_color(pt.score)}
-            data-iso={DateTime.to_iso8601(pt.valid_time)}
+            cx={@now_pt.x}
+            cy={@now_pt.y}
+            r="8"
+            fill="white"
+            stroke={tier_color(@now_pt.score)}
+            stroke-width="3"
+            data-iso={DateTime.to_iso8601(@now_pt.valid_time)}
             style="cursor:pointer;"
           />
-        <% end %>
-        <circle
-          cx={@now_pt.x}
-          cy={@now_pt.y}
-          r="8"
-          fill="white"
-          stroke={tier_color(@now_pt.score)}
-          stroke-width="3"
-          data-iso={DateTime.to_iso8601(@now_pt.valid_time)}
-          style="cursor:pointer;"
-        />
-        <circle
-          cx={@best_pt.x}
-          cy={@best_pt.y}
-          r="8"
-          fill={tier_color(@best_pt.score)}
-          data-iso={DateTime.to_iso8601(@best_pt.valid_time)}
-          style="cursor:pointer;"
-          stroke="white"
-          stroke-width="2"
-        />
-        <text
-          x={@best_pt.x}
-          y={@best_pt.y - 12}
-          font-size="16"
-          text-anchor="middle"
-          font-weight="700"
-          fill={tier_color(@best_pt.score)}
-        >
-          {@best_pt.score}
-        </text>
-        <%= for {x, label} <- @x_labels do %>
+          <circle
+            cx={@best_pt.x}
+            cy={@best_pt.y}
+            r="8"
+            fill={tier_color(@best_pt.score)}
+            data-iso={DateTime.to_iso8601(@best_pt.valid_time)}
+            style="cursor:pointer;"
+            stroke="white"
+            stroke-width="2"
+          />
           <text
-            x={x}
-            y="230"
-            font-size="14"
+            x={@best_pt.x}
+            y={@best_pt.y - 12}
+            font-size="16"
             text-anchor="middle"
-            fill="currentColor"
-            class="opacity-40"
+            font-weight="700"
+            fill={tier_color(@best_pt.score)}
           >
-            {label}
+            {@best_pt.score}
           </text>
-        <% end %>
-      </svg>
-      <div class="flex justify-between text-xs mt-2">
+          <%= for {x, label} <- @x_labels do %>
+            <text
+              x={x}
+              y="230"
+              font-size="14"
+              text-anchor="middle"
+              fill="currentColor"
+              class="opacity-40"
+            >
+              {label}
+            </text>
+          <% end %>
+        </svg>
+      </div>
+      <div class="flex flex-col sm:flex-row sm:justify-between gap-1 text-xs mt-2">
         <span>
           Best:
           <span class="font-bold" style={"color: #{tier_color(@best_pt.score)}"}>