authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-09-14 16:09:33-07:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-09-14 16:09:33-07:00
log5bf43c9f3d09faae49fbc99714456d18e3172ff2
tree502a44ab517c5c0d04f4271d63cb5ca47b630d04
parent7931227977ca3e6f3354a63467caa634ab79796f
signature Signed by PGP key B5690EEEBB952194

fix(web): align monogram project icons in menus (#11806)

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

1 files changed, 39 insertions(+), 34 deletions(-)

apps/web/src/components/ProjectFavicon.tsx+39-34
......@@ -112,44 +112,49 @@ function ProjectFaviconFallback({
112112}) {
113113 if (projectName && projectName.trim().length > 0) {
114114 const identity = deriveProjectIdentity(projectName);
115 // Wrapped like the emoji and Lucide branches so the monogram sits where an
116 // <img> favicon would. Menu items, buttons and the like pull every bare svg
117 // in with [&_svg]:-mx-0.5 to trim the padding stroke icons carry, and this
118 // tile has no such padding.
115119 return (
116 <svg
120 <span
117121 aria-hidden="true"
118 viewBox="0 0 16 16"
119 className={cn(
120 "size-4 shrink-0 overflow-hidden rounded-[25%] font-mono select-none",
121 className,
122 )}
123 style={{
124 backgroundColor: identity.background,
125 backgroundImage: `linear-gradient(145deg, ${identity.highlight}, ${identity.background} 72%)`,
126 }}
122 className={cn("inline-flex size-4 shrink-0 items-center justify-center", className)}
127123 >
128 <text
129 x="8"
130 y="10.8"
131 textAnchor="middle"
132 fill="white"
133 className="font-mono"
134 fontSize="8.25"
135 fontWeight="700"
136 textLength="12"
137 lengthAdjust="spacingAndGlyphs"
138 textRendering="geometricPrecision"
124 <svg
125 viewBox="0 0 16 16"
126 className="size-full overflow-hidden rounded-[25%] font-mono select-none"
127 style={{
128 backgroundColor: identity.background,
129 backgroundImage: `linear-gradient(145deg, ${identity.highlight}, ${identity.background} 72%)`,
130 }}
139131 >
140 {identity.monogram}
141 </text>
142 <rect
143 x="0.25"
144 y="0.25"
145 width="15.5"
146 height="15.5"
147 rx="3.75"
148 fill="none"
149 strokeWidth="0.5"
150 className="stroke-black/10 dark:stroke-white/10"
151 />
152 </svg>
132 <text
133 x="8"
134 y="10.8"
135 textAnchor="middle"
136 fill="white"
137 className="font-mono"
138 fontSize="8.25"
139 fontWeight="700"
140 textLength="12"
141 lengthAdjust="spacingAndGlyphs"
142 textRendering="geometricPrecision"
143 >
144 {identity.monogram}
145 </text>
146 <rect
147 x="0.25"
148 y="0.25"
149 width="15.5"
150 height="15.5"
151 rx="3.75"
152 fill="none"
153 strokeWidth="0.5"
154 className="stroke-black/10 dark:stroke-white/10"
155 />
156 </svg>
157 </span>
153158 );
154159 }
155160