scriptoriumadmin/skillhub
1
0
Fork 0
mirror of https://github.com/iflytek/skillhub.git synced 2026-10-09 03:17:52 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

fix(web): avoid stretching markdown badge images

Browse source
This commit is contained in:
vsxd 2026-03-19 09:19:19 +08:00 • committed by Xudong Sun
parent 012ed35a10
commit 5f8a411852
2 changed files with 15 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
web/src/features/skill/markdown-renderer.test.tsx Normal file
View file

@ -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')
})
})

4
web/src/features/skill/markdown-renderer.tsx
View file

@ -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} />
),
}}
>