Skip to content

SRVOCF-1074: Fix setup guide list number alignment in Firefox - #178

Open
Cragsmann wants to merge 2 commits into
openshift:masterfrom
Cragsmann:SRVOCF-1074-setup-guide-list-numbers-and-text-are-misaligned-in-firefox
Open

SRVOCF-1074: Fix setup guide list number alignment in Firefox#178
Cragsmann wants to merge 2 commits into
openshift:masterfrom
Cragsmann:SRVOCF-1074-setup-guide-list-numbers-and-text-are-misaligned-in-firefox

Conversation

@Cragsmann

Copy link
Copy Markdown

Summary

  • 🐛 Fix ordered-list numbers rendering above (instead of beside) the step titles in the setup guide modal on Firefox. Root cause was PatternFly List/ListItem wrapping each block-level child in an inline <span>, which caused Firefox to misposition the ::marker inside the flex list. Switched to Content component="ol"/"li"/"p", which emits the markers directly in the <li> and aligns correctly in both Firefox and Chrome.
  • 🔧 Style step titles with the pf-v6-u-font-weight-bold utility class instead of the <strong> element (CSS over markup).
  • 🔧 Remove unused data-test attributes (setup-guide-button, setup-guide-modal, setup-guide-close-button) that are not referenced anywhere in the codebase or e2e specs.
  • 🔧 Refactor SetupGuide to accept a className prop applied to its trigger button instead of wrapping the component in a <div> at the call site. In the empty state the link stays on its own centered line below the body text via pf-v6-u-display-block pf-v6-u-mx-auto pf-v6-u-mt-sm.
  • 🔧 Add .claude/worktrees/ to .gitignore so local worktree scratch dirs do not pollute git status.

Fixes SRVOCF-1074

Checklist

  • Updated docs/ARCHITECTURE.md (if there are relevant changes to our layered architecture)

Cragsmann and others added 2 commits September 2, 2026 11:30
The setup guide modal rendered each step with PatternFly List/ListItem,
which wraps item content in an inline span around block paragraphs. Inside
the flex-based .pf-v6-c-list, Firefox positioned the ordered-list number
above the step title instead of beside it (Chrome was unaffected).

Render the steps with Content ol/li instead, which places the paragraphs
directly in the li and aligns the number with the title in both Firefox
and Chrome. Verified by rendering the real PatternFly markup in both.

Also bold the step title via pf-v6-u-font-weight-bold instead of strong,
drop the unused data-test attributes, and give SetupGuide a className prop
so the empty state passes spacing to the component instead of wrapping it
in a div.

Issue SRVOCF-1074

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude Code creates ephemeral, locked git worktrees under .claude/worktrees
for parallel tasks. They are local-only and were showing up as untracked
changes, blocking the pre-PR check. Ignore them alongside the other local
.claude entries.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@openshift-merge-bot

Copy link
Copy Markdown

Pipeline controller notification
This repo is configured to use the pipeline controller. Second-stage tests will be triggered either automatically or after lgtm label is added, depending on the repository configuration. The pipeline controller will automatically detect which contexts are required and will utilize /test Prow commands to trigger the second stage.

For optional jobs, comment /test ? to see a list of all defined jobs. To trigger manually all jobs from second stage use /pipeline required command.

This repository is configured in: LGTM mode

@openshift-ci-robot openshift-ci-robot added the jira/valid-reference Indicates that this PR references a valid Jira ticket of any type. label Sep 2, 2026
@openshift-ci-robot

openshift-ci-robot commented Sep 2, 2026

Copy link
Copy Markdown

@Cragsmann: This pull request references SRVOCF-1074 which is a valid jira issue.

Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the bug to target the "5.1.0" version, but no target version was set.

Details

In response to this:

Summary

  • 🐛 Fix ordered-list numbers rendering above (instead of beside) the step titles in the setup guide modal on Firefox. Root cause was PatternFly List/ListItem wrapping each block-level child in an inline <span>, which caused Firefox to misposition the ::marker inside the flex list. Switched to Content component="ol"/"li"/"p", which emits the markers directly in the <li> and aligns correctly in both Firefox and Chrome.
  • 🔧 Style step titles with the pf-v6-u-font-weight-bold utility class instead of the <strong> element (CSS over markup).
  • 🔧 Remove unused data-test attributes (setup-guide-button, setup-guide-modal, setup-guide-close-button) that are not referenced anywhere in the codebase or e2e specs.
  • 🔧 Refactor SetupGuide to accept a className prop applied to its trigger button instead of wrapping the component in a <div> at the call site. In the empty state the link stays on its own centered line below the body text via pf-v6-u-display-block pf-v6-u-mx-auto pf-v6-u-mt-sm.
  • 🔧 Add .claude/worktrees/ to .gitignore so local worktree scratch dirs do not pollute git status.

Fixes SRVOCF-1074

Checklist

  • Updated docs/ARCHITECTURE.md (if there are relevant changes to our layered architecture)

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

@openshift-ci
openshift-ci Bot requested review from dsimansk and twoGiants September 2, 2026 09:32
@openshift-ci

openshift-ci Bot commented Sep 2, 2026

Copy link
Copy Markdown

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign pmeida for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@openshift-ci

openshift-ci Bot commented Sep 2, 2026

Copy link
Copy Markdown

@Cragsmann: all tests passed!

Full PR test history. Your PR dashboard.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

jira/valid-reference Indicates that this PR references a valid Jira ticket of any type.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants