From 5bf43c9f3d09faae49fbc99714456d18e3172ff2 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Mon, 14 Sep 2026 16:09:33 -0700
Subject: [PATCH] fix(web): align monogram project icons in menus (#11806)

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
---
 apps/web/src/components/ProjectFavicon.tsx | 73 ++++++++++++----------
 1 file changed, 39 insertions(+), 34 deletions(-)

diff --git a/apps/web/src/components/ProjectFavicon.tsx b/apps/web/src/components/ProjectFavicon.tsx
index c545fb188880c9933a288fdbf016124bbf97006b..17006889fb9c3e776168b3abd200ea089a43289b 100644
--- a/apps/web/src/components/ProjectFavicon.tsx
+++ b/apps/web/src/components/ProjectFavicon.tsx
@@ -112,44 +112,49 @@ function ProjectFaviconFallback({
 }) {
   if (projectName && projectName.trim().length > 0) {
     const identity = deriveProjectIdentity(projectName);
+    // Wrapped like the emoji and Lucide branches so the monogram sits where an
+    // <img> favicon would. Menu items, buttons and the like pull every bare svg
+    // in with [&_svg]:-mx-0.5 to trim the padding stroke icons carry, and this
+    // tile has no such padding.
     return (
-      <svg
+      <span
         aria-hidden="true"
-        viewBox="0 0 16 16"
-        className={cn(
-          "size-4 shrink-0 overflow-hidden rounded-[25%] font-mono select-none",
-          className,
-        )}
-        style={{
-          backgroundColor: identity.background,
-          backgroundImage: `linear-gradient(145deg, ${identity.highlight}, ${identity.background} 72%)`,
-        }}
+        className={cn("inline-flex size-4 shrink-0 items-center justify-center", className)}
       >
-        <text
-          x="8"
-          y="10.8"
-          textAnchor="middle"
-          fill="white"
-          className="font-mono"
-          fontSize="8.25"
-          fontWeight="700"
-          textLength="12"
-          lengthAdjust="spacingAndGlyphs"
-          textRendering="geometricPrecision"
+        <svg
+          viewBox="0 0 16 16"
+          className="size-full overflow-hidden rounded-[25%] font-mono select-none"
+          style={{
+            backgroundColor: identity.background,
+            backgroundImage: `linear-gradient(145deg, ${identity.highlight}, ${identity.background} 72%)`,
+          }}
         >
-          {identity.monogram}
-        </text>
-        <rect
-          x="0.25"
-          y="0.25"
-          width="15.5"
-          height="15.5"
-          rx="3.75"
-          fill="none"
-          strokeWidth="0.5"
-          className="stroke-black/10 dark:stroke-white/10"
-        />
-      </svg>
+          <text
+            x="8"
+            y="10.8"
+            textAnchor="middle"
+            fill="white"
+            className="font-mono"
+            fontSize="8.25"
+            fontWeight="700"
+            textLength="12"
+            lengthAdjust="spacingAndGlyphs"
+            textRendering="geometricPrecision"
+          >
+            {identity.monogram}
+          </text>
+          <rect
+            x="0.25"
+            y="0.25"
+            width="15.5"
+            height="15.5"
+            rx="3.75"
+            fill="none"
+            strokeWidth="0.5"
+            className="stroke-black/10 dark:stroke-white/10"
+          />
+        </svg>
+      </span>
     );
   }
 
-- 
2.54.0