OCPBUGS-81668: Fix User Preferences responsive breakpoints bug

[sg00dwin]

Summary

• Replace custom flexbox layout (co-user-preference-page-content) with PatternFly
  Sidebar, SidebarPanel, and SidebarContent components
• Delete UserPreferencePage.scss and UserPreferenceForm.scss — zero custom CSS remains
• Remove stale PF scroll button workaround (no longer needed in PF v6)

Fixes content not filling its container at viewports > 1200px due to hardcoded
max-width: 50% and non-standard breakpoints.

Bug Screenshot

This bug will be more apparent when the console incorporates the upcoming PatternFly Glass theme

After Fix Confirmation

Test plan

• Unit tests pass (26/26 across 7 suites)
• ESLint clean
• Manually verified responsive behavior at all breakpoints

Assisted by Claude code

Summary by CodeRabbit

• Refactor

  • Restructured the user preferences page layout, transitioning from a custom container structure to a sidebar-based design.
  • Updated the presentation and organization of preference form components within the user interface.

• Style

  • Removed custom CSS styling rules from user preference forms.
  • Removed custom CSS styling rules from the user preferences page structure.

[openshift-ci-robot]

@sg00dwin: This pull request references Jira Issue OCPBUGS-81668, which is valid. The bug has been moved to the POST state.

3 validation(s) were run on this bug

• bug is open, matching expected state (open)
• bug target version (4.22.0) matches configured target version for branch (4.22.0)
• bug is in the state ASSIGNED, which is one of the valid states (NEW, ASSIGNED, POST)

The bug has been updated to refer to the pull request using the external bug tracker.

Details

In response to this:

Summary

• Replace custom flexbox layout (co-user-preference-page-content) with PatternFly
  Sidebar, SidebarPanel, and SidebarContent components
• Delete UserPreferencePage.scss and UserPreferenceForm.scss — zero custom CSS remains
• Remove stale PF scroll button workaround (no longer needed in PF v6)

Fixes content not filling its container at viewports > 1200px due to hardcoded
max-width: 50% and non-standard breakpoints.

This bug will be more be more apparent when the console incorporates the upcoming PatternFly Glass theme

After Fix Confirmation

Test plan

• Unit tests pass (26/26 across 7 suites)
• ESLint clean
• Manually verified responsive behavior at all breakpoints

Assisted by Claude code

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-robot]

@sg00dwin: This pull request references Jira Issue OCPBUGS-81668, which is valid.

3 validation(s) were run on this bug

• bug is open, matching expected state (open)
• bug target version (4.22.0) matches configured target version for branch (4.22.0)
• bug is in the state POST, which is one of the valid states (NEW, ASSIGNED, POST)

Details

In response to this:

Summary

• Replace custom flexbox layout (co-user-preference-page-content) with PatternFly
  Sidebar, SidebarPanel, and SidebarContent components
• Delete UserPreferencePage.scss and UserPreferenceForm.scss — zero custom CSS remains
• Remove stale PF scroll button workaround (no longer needed in PF v6)

Fixes content not filling its container at viewports > 1200px due to hardcoded
max-width: 50% and non-standard breakpoints.

This bug will be more apparent when the console incorporates the upcoming PatternFly Glass theme

After Fix Confirmation

Test plan

• Unit tests pass (26/26 across 7 suites)
• ESLint clean
• Manually verified responsive behavior at all breakpoints

Assisted by Claude code

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.

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request refactors the user preferences UI by replacing custom CSS styling with PatternFly components. The changes remove 48 lines of SCSS across two stylesheet files (UserPreferenceForm.scss and UserPreferencePage.scss). The UserPreferencePage.tsx component is updated to use PatternFly's Sidebar, SidebarPanel, and SidebarContent components instead of custom div-based layout containers. The UserPreferenceForm.tsx component has its stylesheet import removed along with its associated className. The overall JSX logic and form submission behavior remain unchanged.

🚥 Pre-merge checks | ✅ 10

✅ Passed checks (10 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately reflects the main change: replacing custom CSS with PatternFly Sidebar components to fix responsive breakpoint issues in the User Preferences page.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Stable And Deterministic Test Names	✅ Passed	Frontend-only refactoring of React/TypeScript components and SCSS stylesheets with no Ginkgo tests modified; custom check validates Ginkgo test stability which is not applicable.
Test Structure And Quality	✅ Passed	PR modifies only frontend React/TypeScript components and SCSS in console-app; no Go test files or Ginkgo tests are present.
Microshift Test Compatibility	✅ Passed	This PR contains only frontend changes (TypeScript/React components and SCSS) with no Go-based Ginkgo e2e tests. The check applies only to Ginkgo e2e tests, which are absent here.
Single Node Openshift (Sno) Test Compatibility	✅ Passed	This PR contains only frontend refactoring of React TypeScript components without introducing any new Ginkgo e2e tests or other tests, making this check not applicable.
Topology-Aware Scheduling Compatibility	✅ Passed	PR modifies only frontend UI components and stylesheets; contains no deployment manifests, operator code, controllers, or scheduling constraints.
Ote Binary Stdout Contract	✅ Passed	OTE Binary Stdout Contract check is not applicable to this PR; only React/TypeScript frontend components and SCSS stylesheets were modified, with no Go code or test infrastructure changes.
Ipv6 And Disconnected Network Test Compatibility	✅ Passed	PR contains only frontend UI component changes to User Preferences; no new Ginkgo e2e tests are introduced.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[logonoff]

Should we be setting a max-width on this? The user preferences page looks very wide now

before:

after:

[openshift-ci]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: sg00dwin
Once this PR has been reviewed and has the lgtm label, please ask for approval from logonoff. 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:

• frontend/OWNERS

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

[sg00dwin]

Should we be setting a max-width on this? The user preferences page looks very wide now

Agreed. Added width sizing to TabContent

[openshift-ci]

@sg00dwin: 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.