css: Move no-masthead-sidebar to pf-m-sidebar

This is the official class for it so we no longer need our own
workaround.

Related-to: patternfly/patternfly#7357
Signed-off-by: Freya Gustavsson <[email protected]>

Author: Venefilyn

pkg/apps/application-list.jsx

@@ -167,7 +167,7 @@ export const ApplicationList = ({ metainfo_db, appProgress, appProgressTitle, ac
         : null;
 
     return (
-        <Page id="list-page" data-packages-checked={dataPackagesInstalled !== null} className='no-masthead-sidebar'>
+        <Page id="list-page" data-packages-checked={dataPackagesInstalled !== null} className="pf-m-no-sidebar">
             <PageSection hasBodyWrapper={false}>
                 <Flex alignItems={{ default: 'alignItemsCenter' }}>
                     <h2 className="pf-v6-u-font-size-3xl">{_("Applications")}</h2>

pkg/apps/application.jsx

@@ -139,7 +139,7 @@ export const Application = ({ metainfo_db, id, progress, action }) => {
 
     return (
         <Page id="app-page"
-              className="application-details no-masthead-sidebar">
+              className="application-details pf-m-no-sidebar">
             <PageBreadcrumb hasBodyWrapper={false} stickyOnBreakpoint={{ default: "top" }}>
                 <Breadcrumb>
                     <BreadcrumbItem to="#/">{_("Applications")}</BreadcrumbItem>

pkg/kdump/kdump-view.jsx

@@ -592,7 +592,7 @@ ${enableCrashKernel}
             }
         }
         return (
-            <Page className='no-masthead-sidebar'>
+            <Page className="pf-m-no-sidebar">
                 <PageSection hasBodyWrapper={false}>
                     <Flex spaceItems={{ default: 'spaceItemsMd' }} alignItems={{ default: 'alignItemsCenter' }}>
                         <Title headingLevel="h2" size="3xl">

pkg/lib/patternfly/patternfly-6-overrides.scss

@@ -293,6 +293,7 @@ $phone: 767px;
 
 // Override as PF Page doesn't allow empty masthead and sidebar
 @media (min-width: 75rem) {
+  // Please use .pf-m-no-sidebar instead as it is the new class name in PF for this
   .pf-v6-c-page.no-masthead-sidebar { /* custom class to scope this style to a specific page component instance */
     --pf-v6-c-page__main-container--GridArea: var(--pf-v6-c-page--masthead--main-container--GridArea);
   }

pkg/metrics/metrics.jsx

@@ -1995,7 +1995,7 @@ export const Application = () => {
 
     return (
         <WithDialogs>
-            <Page className='no-masthead-sidebar'>
+            <Page className="pf-m-no-sidebar">
                 <PageBreadcrumb
                     id='metrics-header-section'
                     hasBodyWrapper={false}

pkg/networkmanager/firewall.jsx

@@ -1057,7 +1057,7 @@ export class Firewall extends React.Component {
         const enabled = this.state.firewall.enabled;
 
         return (
-            <Page className='no-masthead-sidebar'>
+            <Page className="pf-m-no-sidebar">
                 <PageBreadcrumb hasBodyWrapper={false} stickyOnBreakpoint={{ default: "top" }}>
                     <Breadcrumb>
                         <BreadcrumbItem onClick={go_up} className="pf-v6-c-breadcrumb__link">{_("Networking")}</BreadcrumbItem>

pkg/networkmanager/network-interface.jsx

@@ -699,7 +699,7 @@ export const NetworkInterfacePage = ({
     return (
         <Page id="network-interface"
               data-test-wait={operationInProgress}
-              className='no-masthead-sidebar'>
+              className="pf-m-no-sidebar">
             <PageBreadcrumb hasBodyWrapper={false} stickyOnBreakpoint={{ default: "top" }}>
                 <Breadcrumb>
                     <BreadcrumbItem to='#/'>

pkg/networkmanager/network-main.jsx

@@ -147,7 +147,7 @@ export const NetworkPage = ({ privileged, operationInProgress, usage_monitor, pl
     );
 
     return (
-        <Page data-test-wait={operationInProgress} id="networking" className='no-masthead-sidebar'>
+        <Page data-test-wait={operationInProgress} id="networking" className="pf-m-no-sidebar">
             <PageSection hasBodyWrapper={false} id="networking-graphs" className="networking-graphs">
                 <NetworkPlots plot_state={plot_state} />
             </PageSection>

pkg/packagekit/updates.jsx

@@ -1720,7 +1720,7 @@ class OsUpdates extends React.Component {
 
         return (
             <WithDialogs>
-                <Page className='no-masthead-sidebar'>
+                <Page className="pf-m-no-sidebar">
                     {content}
                 </Page>
             </WithDialogs>

pkg/playground/remote.tsx

@@ -33,7 +33,7 @@ const RemotePage = () => {
     };
 
     return (
-        <Page className="no-masthead-sidebar">
+        <Page className="pf-m-no-sidebar">
             <Form isHorizontal>
                 <FormGroup fieldId="host" label="Host" isRequired>
                     <TextInput id="host" value={host} onChange={(_ev, value) => setHost(value)} isRequired />