From a09975c586fa689e8d6a226943aab772485edbd1 Mon Sep 17 00:00:00 2001
From: Steve Goodwin <sgoodwin@redhat.com>
Date: Tue, 14 Apr 2026 12:07:02 -0400
Subject: [PATCH] Replace custom CSS with PatternFly Sidebar on User
 Preferences page Assisted by Claude code

---
 .../user-preferences/UserPreferenceForm.scss  | 13 -------
 .../user-preferences/UserPreferenceForm.tsx   |  8 +----
 .../user-preferences/UserPreferencePage.scss  | 35 -------------------
 .../user-preferences/UserPreferencePage.tsx   | 29 +++++++++------
 4 files changed, 20 insertions(+), 65 deletions(-)
 delete mode 100644 frontend/packages/console-app/src/components/user-preferences/UserPreferenceForm.scss
 delete mode 100644 frontend/packages/console-app/src/components/user-preferences/UserPreferencePage.scss

diff --git a/frontend/packages/console-app/src/components/user-preferences/UserPreferenceForm.scss b/frontend/packages/console-app/src/components/user-preferences/UserPreferenceForm.scss
deleted file mode 100644
index 39d46e6275a..00000000000
--- a/frontend/packages/console-app/src/components/user-preferences/UserPreferenceForm.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.co-user-preference__form {
-    @media (min-width: 769px) {
-      max-width: 100%;
-    }
-  
-    @media (min-width: 992px) {
-      min-width: 650px;
-    }
-  
-    @media (min-width: 1200px) {
-      max-width: 50%;
-    }
-  }
\ No newline at end of file
diff --git a/frontend/packages/console-app/src/components/user-preferences/UserPreferenceForm.tsx b/frontend/packages/console-app/src/components/user-preferences/UserPreferenceForm.tsx
index a3a8bc62c3c..6f3479c4e38 100644
--- a/frontend/packages/console-app/src/components/user-preferences/UserPreferenceForm.tsx
+++ b/frontend/packages/console-app/src/components/user-preferences/UserPreferenceForm.tsx
@@ -3,17 +3,11 @@ import { Form } from '@patternfly/react-core';
 import type { ResolvedUserPreferenceItem } from './types';
 import UserPreferenceField from './UserPreferenceField';
 
-import './UserPreferenceForm.scss';
-
 type UserPreferenceFormProps = { items: ResolvedUserPreferenceItem[] };
 
 const UserPreferenceForm: FC<UserPreferenceFormProps> = ({ items }) =>
   items && items.length > 0 ? (
-    <Form
-      onSubmit={(event) => event.preventDefault()}
-      className="co-user-preference__form"
-      role="form"
-    >
+    <Form onSubmit={(event) => event.preventDefault()} role="form">
       {items.map((item) => (
         <UserPreferenceField key={item.id} item={item} />
       ))}
diff --git a/frontend/packages/console-app/src/components/user-preferences/UserPreferencePage.scss b/frontend/packages/console-app/src/components/user-preferences/UserPreferencePage.scss
deleted file mode 100644
index dd92d2f7fb8..00000000000
--- a/frontend/packages/console-app/src/components/user-preferences/UserPreferencePage.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-.co-user-preference-page {
-  display: flex;
-  min-height: 100%;
-  overflow-y: auto;
-  flex-direction: column;
-}
-
-.co-user-preference-page-content {
-  display: flex;
-  flex-direction: row;
-  background-color: var(--pf-t--global--background--color--primary--default);
-  min-height: 100%;
-  &__tabs {
-    @media (min-width: 769px) {
-      max-width: 100%;
-    }
-
-    @media (min-width: 992px) {
-      min-width: 220px;
-    }
-
-    @media (min-width: 1200px) {
-      max-width: 220px;
-    }
-  }
-  &__tab-content {
-    margin: var(--pf-t--global--spacer--lg);
-    max-width: 100%;
-  }
-
-  //workaround for patternfly bug which causes the buttons to show even when isVertical prop is true
-  .pf-v6-c-tabs__scroll-button {
-    display: none;
-  }
-}
diff --git a/frontend/packages/console-app/src/components/user-preferences/UserPreferencePage.tsx b/frontend/packages/console-app/src/components/user-preferences/UserPreferencePage.tsx
index f39c4635cb1..19f253abd70 100644
--- a/frontend/packages/console-app/src/components/user-preferences/UserPreferencePage.tsx
+++ b/frontend/packages/console-app/src/components/user-preferences/UserPreferencePage.tsx
@@ -1,7 +1,16 @@
 import { useMemo, useState, useEffect, createRef } from 'react';
 import type { FC, ReactElement, JSXElementConstructor, MouseEvent } from 'react';
 import type { TabProps, TabContentProps } from '@patternfly/react-core';
-import { Tabs, Tab, TabTitleText, TabContent, PageSection } from '@patternfly/react-core';
+import {
+  Tabs,
+  Tab,
+  TabTitleText,
+  TabContent,
+  PageSection,
+  Sidebar,
+  SidebarContent,
+  SidebarPanel,
+} from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
 import { useParams, useNavigate } from 'react-router';
 import {
@@ -26,7 +35,6 @@ import type {
 } from './types';
 import UserPreferenceForm from './UserPreferenceForm';
 import { getUserPreferenceGroups } from './utils/getUserPreferenceGroups';
-import './UserPreferencePage.scss';
 
 const UserPreferencePage: FC = () => {
   // resources and calls to hooks
@@ -78,6 +86,7 @@ const UserPreferencePage: FC = () => {
         );
         acc[1].push(
           <TabContent
+            className="pf-v6-u-w-75-on-lg pf-v6-u-w-50-on-xl"
             key={id}
             eventKey={id}
             id={id}
@@ -117,7 +126,7 @@ const UserPreferencePage: FC = () => {
   };
   const activeTab = sortedUserPreferenceGroups.find((group) => group.id === activeTabId)?.label;
   return (
-    <div className="co-user-preference-page">
+    <>
       <DocumentTitle>
         {activeTab
           ? t('console-app~User Preferences {{activeTab}}', { activeTab })
@@ -131,8 +140,8 @@ const UserPreferencePage: FC = () => {
       />
       <PageSection>
         {userPreferenceItemResolved ? (
-          <div className="co-user-preference-page-content">
-            <div className="co-user-preference-page-content__tabs">
+          <Sidebar hasGutter>
+            <SidebarPanel variant="sticky">
               <Tabs
                 activeKey={activeTabId}
                 onSelect={handleTabClick}
@@ -142,17 +151,17 @@ const UserPreferencePage: FC = () => {
               >
                 {userPreferenceTabs}
               </Tabs>
-            </div>
-            <div className="co-user-preference-page-content__tab-content">
+            </SidebarPanel>
+            <SidebarContent>
               {userPreferenceTabContents}
               {spotlight && spotlightElement && <Spotlight selector={spotlight} interactive />}
-            </div>
-          </div>
+            </SidebarContent>
+          </Sidebar>
         ) : (
           <LoadingBox />
         )}
       </PageSection>
-    </div>
+    </>
   );
 };