Bug - [List/ListItem/Content] - Content component inside List/ListItem has wrong alignment on Firefox

Open
#12,555 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
68/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
react, typescript
Domain
frontend, web-dev

Research direction

Start by reproducing the linked CodeSandbox in Firefox and Chrome, then inspect the List, ListItem, and Content component implementations. Find the styling responsible for the vertical alignment and verify that the text aligns with the list number consistently across both browsers.

Written by the indexing model from the issue text.

Description

Stale

Describe the problem

If you put a Content component inside ListItem, the alignment breaks on Firefox. (The text is vertically offset from the list number.)

How do you reproduce the problem?

https://codesandbox.io/p/sandbox/gracious-haze-mlwk56

Expected behavior

No vertical offset. Consistent across browsers.

Is this issue blocking you?
No.

Screenshots

Firefox:

image

Chrome:

image

What is your environment?

  • OS: Fedora Linux 43
  • Browser: Firefox Mozilla
  • Version: 152.0.4 (64-bit)

Jira Issue: PF-4421

Dominant language
TypeScript
Stars
862
Forks
392
Avg merge
4d 8h
Merged PRs (30d)
9

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from patternfly/patternfly-react

All issues in patternfly/patternfly-react

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.