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

Venefilyn · Venefilyn · commit ff792f4a8979 · 2025-08-20T19:55:48.000+02:00
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 <freya@venefilyn.se>
diff --git a/pkg/apps/application-list.jsx b/pkg/apps/application-list.jsx
@@ -169,7 +169,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>
diff --git a/pkg/apps/application.jsx b/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>
diff --git a/pkg/kdump/kdump-view.jsx b/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">
diff --git a/pkg/lib/patternfly/patternfly-6-overrides.scss b/pkg/lib/patternfly/patternfly-6-overrides.scss
@@ -340,6 +340,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);
   }
diff --git a/pkg/metrics/metrics.jsx b/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}
diff --git a/pkg/networkmanager/firewall.jsx b/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>
diff --git a/pkg/networkmanager/network-interface.jsx b/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='#/'>
diff --git a/pkg/networkmanager/network-main.jsx b/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>
diff --git a/pkg/packagekit/updates.jsx b/pkg/packagekit/updates.jsx
@@ -1690,7 +1690,7 @@ class OsUpdates extends React.Component {
 
         return (
             <WithDialogs>
-                <Page className='no-masthead-sidebar'>
+                <Page className="pf-m-no-sidebar">
                     {content}
                 </Page>
             </WithDialogs>
diff --git a/pkg/playground/remote.tsx b/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 />
diff --git a/pkg/selinux/setroubleshoot-view.jsx b/pkg/selinux/setroubleshoot-view.jsx
@@ -453,7 +453,7 @@ export class SETroubleshootPage extends React.Component {
         return (
             <>
                 {errorMessage}
-                <Page className="no-masthead-sidebar">
+                <Page className="pf-m-no-sidebar">
                     <PageSection hasBodyWrapper={false} padding={{ default: "padding" }}>
                         <SELinuxStatus
                             selinuxStatus={this.props.selinuxStatus}
diff --git a/pkg/shell/failures.tsx b/pkg/shell/failures.tsx
@@ -40,7 +40,7 @@ export const EarlyFailure = () => {
 
     return (
         <div id="early-failure" className="early-failure">
-            <Page className='no-masthead-sidebar'>
+            <Page className="pf-m-no-sidebar">
                 <PageSection hasBodyWrapper={false}>
                     <EmptyStatePanel icon={ExclamationCircleIcon}
                                      title={ _("Connection failed") }
@@ -80,7 +80,7 @@ const EarlyFailureReady = ({
 }) => {
     return (
         <div id="early-failure-ready" className="curtains-ct">
-            <Page className="no-masthead-sidebar">
+            <Page className="pf-m-no-sidebar">
                 <PageSection hasBodyWrapper={false}>
                     <EmptyStatePanel {... !loading ? { icon: ExclamationCircleIcon } : {} }
                                      loading={loading}
diff --git a/pkg/sosreport/sosreport.jsx b/pkg/sosreport/sosreport.jsx
@@ -521,7 +521,7 @@ const SOSBody = () => {
 const SOSPage = () => {
     return (
         <WithDialogs>
-            <Page className='no-masthead-sidebar'>
+            <Page className="pf-m-no-sidebar">
                 <PageSection hasBodyWrapper={false} padding={{ default: "padding" }}>
                     <Flex alignItems={{ default: 'alignItemsCenter' }}>
                         <h2 className="pf-v6-u-font-size-3xl">{_("System diagnostics")}</h2>
diff --git a/pkg/storaged/pages.jsx b/pkg/storaged/pages.jsx
@@ -847,7 +847,7 @@ export const StoragePage = ({ location, plot_state }) => {
     const page = get_page_from_location(location);
 
     return (
-        <Page id="storage" className={"no-masthead-sidebar" + (client.in_anaconda_mode() ? " storage-anaconda" : "")}>
+        <Page id="storage" className={"pf-m-no-sidebar" + (client.in_anaconda_mode() ? " storage-anaconda" : "")}>
             { (!client.in_anaconda_mode() && page.parent) &&
             <PageBreadcrumb hasBodyWrapper={false} stickyOnBreakpoint={{ default: "top" }}>
                 <StorageBreadcrumb page={page} />
diff --git a/pkg/systemd/hwinfo.jsx b/pkg/systemd/hwinfo.jsx
@@ -305,7 +305,7 @@ const HardwareInfo = ({ info }) => {
     }
 
     return (
-        <Page className='no-masthead-sidebar'>
+        <Page className='pf-m-no-sidebar'>
             <PageBreadcrumb hasBodyWrapper={false} stickyOnBreakpoint={{ default: "top" }}>
                 <Breadcrumb>
                     <BreadcrumbItem onClick={ () => cockpit.jump("/system", cockpit.transport.host)} className="pf-v6-c-breadcrumb__link">{ _("Overview") }</BreadcrumbItem>
diff --git a/pkg/systemd/logDetails.jsx b/pkg/systemd/logDetails.jsx
@@ -179,7 +179,7 @@ export class LogEntry extends React.Component {
         }
 
         return (
-            <Page id="log-details" className="log-details no-masthead-sidebar">
+            <Page id="log-details" className="log-details pf-m-no-sidebar">
                 <PageBreadcrumb hasBodyWrapper={false} stickyOnBreakpoint={{ default: "top" }}>
                     <Breadcrumb>
                         <BreadcrumbItem onClick={this.goHome} className="pf-v6-c-breadcrumb__link">{_("Logs")}</BreadcrumbItem>
diff --git a/pkg/systemd/logs.jsx b/pkg/systemd/logs.jsx
@@ -181,7 +181,7 @@ export const LogsPage = () => {
     };
 
     return (
-        <Page className='no-masthead-sidebar'>
+        <Page className='pf-m-no-sidebar'>
             <PageSection hasBodyWrapper={false} id="journal" className="journal-filters">
                 <Toolbar hasNoPadding>
                     <ToolbarContent>
diff --git a/pkg/systemd/overview.jsx b/pkg/systemd/overview.jsx
@@ -152,7 +152,7 @@ class OverviewPage extends React.Component {
               window.parent.features.navbar_is_for_current_machine));
 
         return (
-            <Page className='no-masthead-sidebar'>
+            <Page className='pf-m-no-sidebar'>
                 <SuperuserAlert />
                 <PageSection hasBodyWrapper={false} className='ct-overview-header' padding={{ default: 'padding' }}>
                     <div className='ct-overview-header-hostname'>
diff --git a/pkg/systemd/services.jsx b/pkg/systemd/services.jsx
@@ -908,7 +908,7 @@ const ServicesPage = () => {
 
     return (
         <WithDialogs>
-            <Page className='no-masthead-sidebar'>
+            <Page className='pf-m-no-sidebar'>
                 {cockpit.location.path.length == 0 &&
                 <PageSection hasBodyWrapper={false} className="services-header">
                     <Flex>
diff --git a/pkg/systemd/terminal.jsx b/pkg/systemd/terminal.jsx
@@ -225,7 +225,7 @@ const _ = cockpit.gettext;
                 : <span>Loading...</span>;
 
             return (
-                <Page className="no-masthead-sidebar">
+                <Page className="pf-m-no-sidebar">
                     <PageSection hasShadowBottom>
                         <div className="terminal-group">
                             <tt className="terminal-title">{this.state.title}</tt>
diff --git a/pkg/users/account-details.js b/pkg/users/account-details.js
@@ -222,7 +222,7 @@ export function AccountDetails({ accounts, groups, current_user, user, shells })
     );
 
     return (
-        <Page id="account" className='no-masthead-sidebar'>
+        <Page id="account" className="pf-m-no-sidebar">
             <PageBreadcrumb hasBodyWrapper={false} stickyOnBreakpoint={{ default: "top" }}>
                 <Breadcrumb>
                     <BreadcrumbItem to="#/">{_("Accounts")}</BreadcrumbItem>
diff --git a/pkg/users/accounts-list.js b/pkg/users/accounts-list.js
@@ -471,7 +471,7 @@ export const AccountsMain = ({ accountsInfo, current_user, groups, isGroupsExpan
     });
 
     return (
-        <Page id="accounts" className='no-masthead-sidebar'>
+        <Page id="accounts" className="pf-m-no-sidebar">
             <PageSection hasBodyWrapper={false}>
                 <Stack hasGutter>
                     <GroupsList accounts={accounts} groups={groups} isExpanded={isGroupsExpanded} setIsExpanded={setIsGroupsExpanded} min_gid={min_gid} max_gid={max_gid} />

Original file line number	Diff line number	Diff line change
`@@ -592,7 +592,7 @@ ${enableCrashKernel}`
`592`	`592`	`}`
`593`	`593`	`}`
`594`	`594`	`return (`
`595`		`- <Page className='no-masthead-sidebar'>`
	`595`	`+ <Page className="pf-m-no-sidebar">`
`596`	`596`	`<PageSection hasBodyWrapper={false}>`
`597`	`597`	`<Flex spaceItems={{ default: 'spaceItemsMd' }} alignItems={{ default: 'alignItemsCenter' }}>`
`598`	`598`	`<Title headingLevel="h2" size="3xl">`
Original file line number	Diff line number	Diff line change
`@@ -340,6 +340,7 @@ $phone: 767px;`
`340`	`340`
`341`	`341`	`// Override as PF Page doesn't allow empty masthead and sidebar`
`342`	`342`	`@media (min-width: 75rem) {`
	`343`	`+ // Please use .pf-m-no-sidebar instead as it is the new class name in PF for this`
`343`	`344`	`.pf-v6-c-page.no-masthead-sidebar { /* custom class to scope this style to a specific page component instance */`
`344`	`345`	`--pf-v6-c-page__main-container--GridArea: var(--pf-v6-c-page--masthead--main-container--GridArea);`
`345`	`346`	`}`