More layout tweaks

web/src/components/packets/ErrorPacket.tsx

@@ -29,8 +29,8 @@ export const ErrorPacket: React.FC<ErrorPacketProps> = ({ packet }) => {
         
         {data.binaryData && (
           <div className="mt-3">
-            <div className="text-xs text-neutral-400 mb-1">Raw Data</div>
-            <div className="font-mono text-neutral-300 text-sm bg-neutral-800/50 p-2 rounded overflow-auto">
+            <div className="text-xs text-neutral-400 uppercase tracking-wide mb-1">Raw Data</div>
+            <div className="font-mono text-neutral-300 text-xs bg-neutral-800/80 p-3 rounded-md overflow-auto tracking-wide leading-relaxed border border-neutral-700/40">
               {data.binaryData}
             </div>
           </div>

web/src/components/packets/KeyValuePair.tsx

@@ -13,10 +13,10 @@ export const KeyValuePair: React.FC<KeyValuePairProps> = ({
 }) => {
   return (
     <div>
-      <div className={`text-xs text-neutral-400 ${large ? 'mb-1' : ''}`}>
+      <div className={`text-xs tracking-wide text-neutral-400 uppercase ${large ? 'mb-1' : ''}`}>
         {label}
       </div>
-      <div className={large ? "font-medium text-base" : ""}>
+      <div className={`${large ? "text-base font-medium tracking-wide" : "tracking-tight"}`}>
         {value || "—"}
       </div>
     </div>
@@ -29,7 +29,7 @@ interface KeyValueGridProps {
 
 export const KeyValueGrid: React.FC<KeyValueGridProps> = ({ children }) => {
   return (
-    <div className="grid grid-cols-2 gap-3 max-w-md">
+    <div className="grid grid-cols-2 gap-x-6 gap-y-3 max-w-xl">
       {children}
     </div>
   );

web/src/components/packets/PacketCard.tsx

@@ -53,7 +53,7 @@ export const PacketCard: React.FC<PacketCardProps> = ({
       </div>
 
       {/* Card Content */}
-      <div className="p-6">
+      <div className="p-6 font-mono text-sm">
         {children}
       </div>
     </div>

web/src/components/packets/TextMessagePacket.tsx

@@ -18,7 +18,7 @@ export const TextMessagePacket: React.FC<TextMessagePacketProps> = ({ packet })
       label="Text Message"
       backgroundColor="bg-blue-950/5"
     >
-      <div className="max-w-md">
+      <div className="max-w-lg bg-neutral-800/30 p-3 rounded-md tracking-tight break-words">
         {data.textMessage || "Empty message"}
       </div>
     </PacketCard>

web/src/components/packets/WaypointPacket.tsx

@@ -16,21 +16,24 @@ export const WaypointPacket: React.FC<WaypointPacketProps> = ({ packet }) => {
   if (!waypoint) {
     return null;
   }
-  
+
   // Convert coordinates
   const latitude = waypoint.latitudeI ? waypoint.latitudeI * 1e-7 : undefined;
-  const longitude = waypoint.longitudeI ? waypoint.longitudeI * 1e-7 : undefined;
-  
-  // Format expire time if available
-  const expireTime = waypoint.expire && waypoint.expire > 0
-    ? new Date(waypoint.expire * 1000).toLocaleString([], {
-        month: 'short',
-        day: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit'
-      })
+  const longitude = waypoint.longitudeI
+    ? waypoint.longitudeI * 1e-7
     : undefined;
-  
+
+  // Format expire time if available
+  const expireTime =
+    waypoint.expire && waypoint.expire > 0
+      ? new Date(waypoint.expire * 1000).toLocaleString([], {
+          month: "short",
+          day: "numeric",
+          hour: "2-digit",
+          minute: "2-digit",
+        })
+      : undefined;
+
   return (
     <PacketCard
       packet={packet}
@@ -39,72 +42,54 @@ export const WaypointPacket: React.FC<WaypointPacketProps> = ({ packet }) => {
       label="Waypoint"
       backgroundColor="bg-violet-950/5"
     >
-      <div className="space-y-4 max-w-full">
-        {waypoint.name && (
-          <KeyValuePair
-            label="Waypoint Name"
-            value={waypoint.name}
-            large={true}
-          />
-        )}
-        
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <div>
-            <KeyValueGrid>
-              {waypoint.id !== undefined && (
-                <KeyValuePair
-                  label="ID"
-                  value={waypoint.id}
-                />
-              )}
-              {latitude !== undefined && (
-                <KeyValuePair
-                  label="Latitude"
-                  value={latitude.toFixed(6)}
-                />
-              )}
-              {longitude !== undefined && (
-                <KeyValuePair
-                  label="Longitude"
-                  value={longitude.toFixed(6)}
-                />
-              )}
-              {expireTime && (
-                <KeyValuePair
-                  label="Expires"
-                  value={expireTime}
-                />
-              )}
-              {waypoint.lockedTo !== undefined && waypoint.lockedTo > 0 && (
-                <KeyValuePair
-                  label="Locked To"
-                  value={`!${waypoint.lockedTo.toString(16)}`}
-                />
-              )}
-            </KeyValueGrid>
-            
-            {waypoint.description && (
-              <div className="mt-4">
-                <div className="text-xs text-neutral-400 mb-1">Description</div>
-                <div className="text-neutral-300">{waypoint.description}</div>
-              </div>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div className="space-y-4">
+          {waypoint.name && (
+            <div>
+              <div className="text-xs text-neutral-400 mb-1">Waypoint Name</div>
+              <div className="text-base text-neutral-300">{waypoint.name}</div>
+            </div>
+          )}
+          <KeyValueGrid>
+            {latitude !== undefined && (
+              <KeyValuePair label="Latitude" value={latitude.toFixed(6)} />
             )}
-          </div>
-          
-          {latitude !== undefined && longitude !== undefined && (
-            <div className="h-[240px] w-full rounded-lg overflow-hidden">
-              <Map 
-                latitude={latitude} 
-                longitude={longitude}
-                caption={waypoint.name}
-                width={400}
-                height={240}
-                flush={true}
+            {longitude !== undefined && (
+              <KeyValuePair label="Longitude" value={longitude.toFixed(6)} />
+            )}
+            {waypoint.id !== undefined && (
+              <KeyValuePair label="Waypoint ID" value={waypoint.id} />
+            )}
+            {expireTime && <KeyValuePair label="Expires" value={expireTime} />}
+            {waypoint.lockedTo !== undefined && waypoint.lockedTo > 0 && (
+              <KeyValuePair
+                label="Locked To"
+                value={`!${waypoint.lockedTo.toString(16)}`}
               />
+            )}
+          </KeyValueGrid>
+
+          {waypoint.description && (
+            <div className="mt-4">
+              <div className="text-xs text-neutral-400 mb-1">Description</div>
+              <div className="text-neutral-300">{waypoint.description}</div>
             </div>
           )}
         </div>
+
+        {latitude !== undefined && longitude !== undefined && (
+          <div className="h-[240px] w-full rounded-lg overflow-hidden">
+            <Map
+              latitude={latitude}
+              longitude={longitude}
+              caption={waypoint.name}
+              width={400}
+              height={240}
+              flush={true}
+            />
+          </div>
+        )}
       </div>
     </PacketCard>
   );
-};
+};