From 4245d8df76e3a64482d31a31ea66364e24a63445 Mon Sep 17 00:00:00 2001
From: fylorn <249551762+fylorn@users.noreply.github.com>
Date: Fri, 23 Oct 2026 11:23:56 +0800
Subject: [PATCH] Routing: align the letter tile of an upstream without a logo

The letter tile drawn for an upstream without a known logo was a span
holding text, so its baseline was the letter's baseline. In the route
table's rule list, where logos sit inline with vertical-align: -2px, the
tile dropped about 5 px below the text, and the inline-block there also
dropped its flex centring, pushing the letter to the corner. Draw the tile
as an SVG like the other logos, so it lines up wherever they do.

Fixes #365

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/ui/logos.tsx | 36 ++++++++++++++++++++++++++++--------
 1 file changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/ui/logos.tsx b/src/ui/logos.tsx
index a9fade24..a9cd3808 100644
--- a/src/ui/logos.tsx
+++ b/src/ui/logos.tsx
@@ -56,18 +56,38 @@ export function Logo({
  */
 export function LetterTile({ name, size = 16, className }: { name: string; size?: number; className?: string }) {
   const ch = Array.from(name.trim().replace(/^[^\p{L}\p{N}]+/u, ""))[0]?.toUpperCase() ?? "?";
+  // 画成 SVG 而不是带字的 span：基线在底边，和标志一样，夹在一行字里时对齐方式通用
   return (
-    <span
+    <svg
       data-slot="logo"
       aria-hidden
-      className={cn(
-        "inline-flex shrink-0 items-center justify-center rounded-[4px] border border-current/35 font-semibold leading-none",
-        className,
-      )}
-      style={{ width: size, height: size, fontSize: Math.max(8, Math.round(size * 0.58)) }}
+      viewBox={`0 0 ${size} ${size}`}
+      width={size}
+      height={size}
+      className={cn("shrink-0", className)}
     >
-      {ch}
-    </span>
+      <rect
+        x={0.5}
+        y={0.5}
+        width={size - 1}
+        height={size - 1}
+        rx={3.5}
+        fill="none"
+        stroke="currentColor"
+        strokeOpacity={0.35}
+      />
+      <text
+        x={size / 2}
+        y={size / 2}
+        textAnchor="middle"
+        dominantBaseline="central"
+        fill="currentColor"
+        fontSize={Math.max(8, Math.round(size * 0.58))}
+        fontWeight={600}
+      >
+        {ch}
+      </text>
+    </svg>
   );
 }