From 993af8447e896755f02f412fb2b75fabfdb02baf Mon Sep 17 00:00:00 2001
From: Graham McIntire <graham@mcintire.me>
Date: Thu, 19 Feb 2026 18:55:00 -0600
Subject: [PATCH] Move APRS icons before callsigns on info page

Reorder icon and callsign in the page header, Other SSIDs table, and
Stations Near Current Position table so the icon appears first. Fix
icon clipping with flex-shrink-0 h-8 and add py-2 padding to SSIDs
table cells for proper vertical alignment.
---
 lib/aprsme_web/live/info_live/show.html.heex | 36 ++++++++++----------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/lib/aprsme_web/live/info_live/show.html.heex b/lib/aprsme_web/live/info_live/show.html.heex
index f5fec3b..21a06aa 100644
--- a/lib/aprsme_web/live/info_live/show.html.heex
+++ b/lib/aprsme_web/live/info_live/show.html.heex
@@ -11,9 +11,6 @@
               {gettext("APRS Station")}
             </h1>
             <div class="ml-3 flex items-center space-x-3">
-              <span class="inline-flex items-center rounded-md bg-indigo-100 px-2 py-1 text-xs font-medium text-indigo-700 dark:bg-indigo-400/10 dark:text-indigo-400">
-                {@callsign}
-              </span>
               <%= if @packet do %>
                 <% {symbol_table, symbol_code} = AprsmeWeb.AprsSymbol.extract_from_packet(@packet) %>
                 <% display_symbol =
@@ -25,6 +22,9 @@
                   {render_symbol_html(@packet)}
                 </div>
               <% end %>
+              <span class="inline-flex items-center rounded-md bg-indigo-100 px-2 py-1 text-xs font-medium text-indigo-700 dark:bg-indigo-400/10 dark:text-indigo-400">
+                {@callsign}
+              </span>
             </div>
           </div>
         </div>
@@ -341,14 +341,8 @@
                     <tbody>
                       <%= for ssid_info <- @other_ssids do %>
                         <tr>
-                          <td class="font-medium">
+                          <td class="font-medium py-2">
                             <div class="flex items-center space-x-2">
-                              <.link
-                                navigate={~p"/info/#{ssid_info.callsign}"}
-                                class="font-semibold text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
-                              >
-                                {ssid_info.callsign}
-                              </.link>
                               <%= if ssid_info.packet do %>
                                 <% {symbol_table, symbol_code} =
                                   AprsmeWeb.AprsSymbol.extract_from_packet(ssid_info.packet) %>
@@ -357,10 +351,16 @@
                                     do: symbol_table,
                                     else:
                                       "#{AprsmeWeb.AprsSymbol.normalize_symbol_table(symbol_table)}#{AprsmeWeb.AprsSymbol.normalize_symbol_code(symbol_code)}" %>
-                                <div title={display_symbol}>
+                                <div class="flex-shrink-0 h-8" title={display_symbol}>
                                   {render_symbol_html(ssid_info.packet)}
                                 </div>
                               <% end %>
+                              <.link
+                                navigate={~p"/info/#{ssid_info.callsign}"}
+                                class="font-semibold text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
+                              >
+                                {ssid_info.callsign}
+                              </.link>
                             </div>
                           </td>
                           <td class="text-gray-500 dark:text-gray-400">
@@ -456,12 +456,6 @@
                   <tr>
                     <td class="font-medium">
                       <div class="flex items-center space-x-2">
-                        <.link
-                          navigate={~p"/info/#{neighbor.callsign}"}
-                          class="font-semibold text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
-                        >
-                          {neighbor.callsign}
-                        </.link>
                         <%= if neighbor.packet do %>
                           <% {symbol_table, symbol_code} =
                             AprsmeWeb.AprsSymbol.extract_from_packet(neighbor.packet) %>
@@ -470,10 +464,16 @@
                               do: symbol_table,
                               else:
                                 "#{AprsmeWeb.AprsSymbol.normalize_symbol_table(symbol_table)}#{AprsmeWeb.AprsSymbol.normalize_symbol_code(symbol_code)}" %>
-                          <div title={display_symbol}>
+                          <div class="flex-shrink-0 h-8" title={display_symbol}>
                             {render_symbol_html(neighbor.packet)}
                           </div>
                         <% end %>
+                        <.link
+                          navigate={~p"/info/#{neighbor.callsign}"}
+                          class="font-semibold text-indigo-600 hover:text-indigo-500 dark:text-indigo-400 dark:hover:text-indigo-300"
+                        >
+                          {neighbor.callsign}
+                        </.link>
                       </div>
                     </td>
                     <td class="text-gray-500 dark:text-gray-400">