containers / containers/podman.io

[Bug]: Invalid HTML DOM nesting (<p> wrapping <Markdown />) in CustomCard component

Aperta Adatta ai principianti
#653 1 commento 0 reazioni 0 assegnatari Vedi su GitHub
Lingua principale
TypeScript
Stelle
108
Fork
188
Merge medio
6g 22h
PR unite (30g)
12

Descrizione

### Consisely describe the issue

The `CardBody` component in `src/components/ui/CustomCard/index.tsx` wraps the Markdown component inside a `

` element:
```




```
`Markdown `renders `ReactMarkdown`, which outputs block-level elements such as `

` for normal markdown content. This results in nested paragraph elements in the rendered HTML
Nested`

` elements are invalid HTML. Browsers automatically repair the DOM structure when parsing this markup, but the generated HTML is still invalid.

i will fix these issue by replacing the outer `

` element with a `

` , this preserves valid HTML while allowing Markdown to render block-level elements correctly.

### Upload screenshots or screen recordings

Add screenshots or screen recordings to help explain your problem.

### LLM Policy

- [x] This issue is human-written, and folow up comments will also be human-written

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

Direzione di ricerca

Inizia da src/components/ui/CustomCard/index.tsx e analizza il componente CardBody e il suo utilizzo di Markdown. Conferma come ReactMarkdown esegue il rendering del normale contenuto Markdown, quindi verifica che l’HTML renderizzato non contenga più elementi paragrafo annidati e rimanga valido per il Markdown a livello di blocco.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
react, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
1/5
Tempo stimato
Meno di un'ora
Stato di attività
Tranquilla
Chiarezza
Specificata chiaramente
Idoneità per principianti
82/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.