containers / containers/podman.io
[Bug]: Invalid HTML DOM nesting (<p> wrapping <Markdown />) in CustomCard component
- Dominant language
- TypeScript
- Stars
- 108
- Forks
- 188
- Avg merge
- 9d 15h
- Merged PRs (30d)
- 11
Description
### 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
Contributor guide
No contributing guide indexed for this repository
Research direction
Start in src/components/ui/CustomCard/index.tsx and inspect the CardBody component and its Markdown usage. Confirm how ReactMarkdown renders normal markdown content, then verify that the rendered HTML no longer contains nested paragraph elements and remains valid for block-level markdown.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 1/5
- Estimated time
- Under an hour
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 82/100