Make hop count a fixed-width column for alignment

Author: statico

src/ui/components/PacketList.tsx

@@ -348,9 +348,10 @@ function PacketRow({ packet, nodeStore, isSelected }: PacketRowProps) {
     const color = getPortColor(packet.portnum);
 
     // Hop info (only show for received packets with valid hop data)
+    // Fixed width column (7 chars) for alignment
     const hops = mp.hopStart != null && mp.hopLimit != null && mp.hopStart > 0
-      ? `(${mp.hopStart - mp.hopLimit}/${mp.hopStart})`
-      : null;
+      ? `(${mp.hopStart - mp.hopLimit}/${mp.hopStart})`.padEnd(7)
+      : "       ";
 
     // For encrypted packets, show channel and length
     const encryptedInfo = packet.portnum === undefined && mp.payloadVariant.case === "encrypted"
@@ -374,7 +375,7 @@ function PacketRow({ packet, nodeStore, isSelected }: PacketRowProps) {
           <Text color={theme.data.nodeFrom}>{fromName.padEnd(10)}</Text>
           <Text color={theme.data.arrow}>{" -> "}</Text>
           <Text color={theme.data.nodeTo}>{toName.padEnd(10)}</Text>
-          {hops && <Text color={theme.fg.muted}>{hops} </Text>}
+          <Text color={theme.fg.muted}>{hops}</Text>
           {encryptedInfo}
           {renderPacketSummary(packet, nodeStore)}
         </Text>