Replace custom CSS with PatternFly Sidebar on User Preferences page

Also, apply an override z-index to handle upstream PatternFly bug
Assisted by Claude code

Author: sg00dwin

frontend/packages/console-app/src/components/user-preferences/UserPreferenceForm.scss

@@ -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} />
       ))}

frontend/packages/console-app/src/components/user-preferences/UserPreferenceForm.tsx

@@ -1,35 +1,6 @@
-.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;
-  }
+// Workaround: SidebarPanel and MenuToggle both use --pf-t--global--z-index--xs,
+// so menu-toggles render above the sticky panel when content scrolls at mobile width.
+// TODO: Remove when fixed upstream in PatternFly. See: https://github.com/patternfly/patternfly/issues/8323
+.co-user-preferences__sidebar-panel {
+  --pf-v6-c-sidebar__panel--ZIndex: var(--pf-t--global--z-index--sm);
 }

frontend/packages/console-app/src/components/user-preferences/UserPreferencePage.scss

@@ -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 {
@@ -19,14 +28,14 @@ import { useQueryParams } from '@console/shared/src/hooks/useQueryParams';
 import { orderExtensionBasedOnInsertBeforeAndAfter } from '@console/shared/src/utils/order-extensions';
 import { isModifiedEvent } from '@console/shared/src/utils/utils';
 import { USER_PREFERENCES_BASE_URL } from './const';
+import './UserPreferencePage.scss';
 import type {
   UserPreferenceTabGroup,
   ResolvedUserPreferenceItem,
   ResolvedUserPreferenceGroup,
 } from './types';
 import UserPreferenceForm from './UserPreferenceForm';
 import { getUserPreferenceGroups } from './utils/getUserPreferenceGroups';
-import './UserPreferencePage.scss';
 
 const UserPreferencePage: FC = () => {
   // resources and calls to hooks
@@ -78,6 +87,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 +127,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 +141,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" className="co-user-preferences__sidebar-panel">
               <Tabs
                 activeKey={activeTabId}
                 onSelect={handleTabClick}
@@ -142,17 +152,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>
+    </>
   );
 };