containers / containers/podman.io
[Bug]: Invalid HTML DOM nesting (<p> wrapping <Markdown />) in CustomCard component
- Vorherrschende Sprache
- TypeScript
- Sterne
- 108
- Forks
- 188
- Ø Merge
- 3 T. 14 Std.
- Gemergte PRs (30 T.)
- 11
Beschreibung
### 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 `
### 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
Beitragsleitfaden
Für dieses Repository ist kein Beitragsleitfaden indexiert
Rechercherichtung
Beginne in src/components/ui/CustomCard/index.tsx und untersuche die CardBody-Komponente und ihre Verwendung von Markdown. Bestätige, wie ReactMarkdown normalen Markdown-Inhalt rendert, und überprüfe anschließend, dass das gerenderte HTML keine verschachtelten Absatzelemente mehr enthält und für Markdown auf Blockebene gültig bleibt.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- react, typescript
- Bereich
- frontend
- Issue-Typ
- Bug
- Schwierigkeit
- 1/5
- Geschätzter Aufwand
- Unter einer Stunde
- Aktivitätsstatus
- Ruhig
- Klarheit
- Klar beschrieben
- Anfängerfreundlichkeit
- 82/100