Skip to content

Commit d3dd60d

Browse files
committed
fix(blog): preserve sticker aspect ratio in conversation snippets
The avatar slot had no explicit width, so the flex layout shrunk it below 64px and the base img max-width:100% rule then constrained the sticker to that narrower box. Pin the container to 64×64 with shrink-0, set max-w-none and object-contain on the img so non-square source stickers render at their natural aspect ratio. Assisted-by: Claude Opus 4.7 via Claude Code Signed-off-by: Xe Iaso <me@xeiaso.net>
1 parent 696f579 commit d3dd60d

1 file changed

Lines changed: 4 additions & 2 deletions

File tree

lume/src/_components/XeblogConv.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,13 @@ const ConvSnippet = ({
3333
[&:not(:first-child)]:-mt-[1px] [&:not(:first-child)]:py-1`}
3434
>
3535
{/* Avatar Container */}
36-
<div className="h-16 not-prose">
36+
<div className="h-16 w-16 shrink-0 not-prose">
3737
<img
38-
className="h-16 w-16 rounded-xs"
38+
className="h-16 w-16 shrink-0 max-w-none object-contain rounded-xs"
3939
alt={`${name} is ${mood}`}
4040
loading="lazy"
41+
width={64}
42+
height={64}
4143
src={`https://stickers.xeiaso.net/sticker/${nameLower}/${mood}`}
4244
/>
4345
</div>

0 commit comments

Comments
 (0)