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({...@@ -112,44 +112,49 @@ function ProjectFaviconFallback({
112}) {112}) {
113 if (projectName && projectName.trim().length > 0) {113 if (projectName && projectName.trim().length > 0) {
114 const identity = deriveProjectIdentity(projectName);114 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.
115 return (119 return (
116 <svg120 <span
117 aria-hidden="true"121 aria-hidden="true"
118 viewBox="0 0 16 16"122 className={cn("inline-flex size-4 shrink-0 items-center justify-center", className)}
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 }}
127 >123 >
128 <text124 <svg
129 x="8"125 viewBox="0 0 16 16"
130 y="10.8"126 className="size-full overflow-hidden rounded-[25%] font-mono select-none"
131 textAnchor="middle"127 style={{
132 fill="white"128 backgroundColor: identity.background,
133 className="font-mono"129 backgroundImage: `linear-gradient(145deg, ${identity.highlight}, ${identity.background} 72%)`,
134 fontSize="8.25"130 }}
135 fontWeight="700"
136 textLength="12"
137 lengthAdjust="spacingAndGlyphs"
138 textRendering="geometricPrecision"
139 >131 >
140 {identity.monogram}132 <text
141 </text>133 x="8"
142 <rect134 y="10.8"
143 x="0.25"135 textAnchor="middle"
144 y="0.25"136 fill="white"
145 width="15.5"137 className="font-mono"
146 height="15.5"138 fontSize="8.25"
147 rx="3.75"139 fontWeight="700"
148 fill="none"140 textLength="12"
149 strokeWidth="0.5"141 lengthAdjust="spacingAndGlyphs"
150 className="stroke-black/10 dark:stroke-white/10"142 textRendering="geometricPrecision"
151 />143 >
152 </svg>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>
153 );158 );
154 }159 }
155160