From 5f8a41185248b3bdc4d54d99236d46439a1bfd71 Mon Sep 17 00:00:00 2001
From: vsxd <sun.xd@hotmail.com>
Date: Thu, 19 Mar 2026 09:19:19 +0800
Subject: [PATCH] fix(web): avoid stretching markdown badge images

---
 web/src/features/skill/markdown-renderer.test.tsx | 12 ++++++++++++
 web/src/features/skill/markdown-renderer.tsx      |  4 +++-
 2 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 web/src/features/skill/markdown-renderer.test.tsx

diff --git a/web/src/features/skill/markdown-renderer.test.tsx b/web/src/features/skill/markdown-renderer.test.tsx
new file mode 100644
index 00000000..d7f39c4c
--- /dev/null
+++ b/web/src/features/skill/markdown-renderer.test.tsx
@@ -0,0 +1,12 @@
+import { describe, expect, it } from 'vitest'
+import { MARKDOWN_IMAGE_CLASS_NAME } from './markdown-renderer'
+
+describe('MARKDOWN_IMAGE_CLASS_NAME', () => {
+  it('keeps markdown images at their intrinsic width while remaining responsive', () => {
+    const classNames = MARKDOWN_IMAGE_CLASS_NAME.split(' ')
+
+    expect(classNames).toContain('h-auto')
+    expect(classNames).toContain('max-w-full')
+    expect(classNames).not.toContain('w-full')
+  })
+})
diff --git a/web/src/features/skill/markdown-renderer.tsx b/web/src/features/skill/markdown-renderer.tsx
index 0a9931a3..12c18cce 100644
--- a/web/src/features/skill/markdown-renderer.tsx
+++ b/web/src/features/skill/markdown-renderer.tsx
@@ -6,6 +6,8 @@ import { cn } from '@/shared/lib/utils'
 import { remarkInferCodeLanguage } from './code-language'
 import { stripMarkdownFrontmatter } from './markdown-frontmatter'
 
+export const MARKDOWN_IMAGE_CLASS_NAME = 'h-auto max-w-full'
+
 interface MarkdownRendererProps {
   content: string
   className?: string
@@ -181,7 +183,7 @@ export function MarkdownRenderer({ content, className }: MarkdownRendererProps)
             </td>
           ),
           img: ({ className: imageClassName, alt, ...props }) => (
-            <img className={cn('w-full', imageClassName)} alt={alt ?? ''} {...props} />
+            <img className={cn(MARKDOWN_IMAGE_CLASS_NAME, imageClassName)} alt={alt ?? ''} {...props} />
           ),
         }}
       >