PF card: Adapt for PF's pf-m-wrap option

pkg/lib/cockpit-components-logs-panel.jsx

@@ -169,7 +169,7 @@ export class LogsPanel extends React.Component {
         const actions = (this.state.logs.length > 0 && this.props.goto_url) && <Button variant="secondary" onClick={e => cockpit.jump(this.props.goto_url)}>{_("View all logs")}</Button>;
 
         return (
-            <Card className="cockpit-log-panel">
+            <Card className="pf-m-wrap cockpit-log-panel">
                 <CardHeader actions={{ actions }}>
                     <CardTitle>{this.props.title}</CardTitle>
                 </CardHeader>

pkg/lib/cockpit-components-modifications.jsx

@@ -160,7 +160,7 @@ export class Modifications extends React.Component {
         return (
             <>
                 <ModificationsExportDialog show={this.state.showDialog} shell={this.props.shell} ansible={this.props.ansible} onClose={ () => this.setState({ showDialog: false }) } />
-                <Card className="modifications-table">
+                <Card className="pf-m-wrap modifications-table">
                     <CardHeader>
                         <CardTitle component="h2">{this.props.title}</CardTitle>
                         { !emptyRow &&

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

@@ -105,18 +105,8 @@ select.pf-v5-c-form-control {
   // https://github.com/patternfly/patternfly/issues/3959
   --pf-v5-c-card__header-toggle--MarginTop: 0;
 
-  .pf-v5-c-card__header:not(.ct-card-expandable-header),
-  .pf-v5-c-card__header:not(.ct-card-expandable-header) .pf-v5-c-card__header-main {
-    // upstream fix (pending): https://github.com/patternfly/patternfly/pull/3714
-    display: flex;
-    flex-wrap: wrap;
-    row-gap: var(--pf-v5-global--spacer--sm);
-    justify-content: space-between;
-  }
-
   .pf-v5-c-card__header:not(.ct-card-expandable-header) {
     > .pf-v5-c-card__actions {
-      flex-wrap: wrap;
       row-gap: var(--pf-v5-global--spacer--sm);
 
       // PF4 CardActions act up when using buttons while the title is large of font

pkg/metrics/metrics.jsx

@@ -814,7 +814,7 @@ class CurrentMetrics extends React.Component {
 
         return (
             <Gallery className="current-metrics" hasGutter>
-                <Card id="current-metrics-card-cpu">
+                <Card className="pf-m-wrap" id="current-metrics-card-cpu">
                     <CardHeader className='align-baseline'>
                         <CardTitle>{ _("CPU") }</CardTitle>
                         { this.cpuTemperature !== null &&
@@ -913,7 +913,7 @@ class CurrentMetrics extends React.Component {
                     </CardBody>
                 </Card>
 
-                <Card id="current-metrics-card-disks">
+                <Card className="pf-m-wrap" id="current-metrics-card-disks">
                     <CardTitle>{ _("Disks") }</CardTitle>
                     <CardBody>
                         <DescriptionList isHorizontal columnModifier={{ default: '2Col' }}>
@@ -974,7 +974,7 @@ class CurrentMetrics extends React.Component {
                     </CardBody>
                 </Card>
 
-                <Card className="current-metrics-network">
+                <Card className="pf-m-wrap current-metrics-network">
                     <CardTitle>{ _("Network") }</CardTitle>
                     <CardBody>
                         <Table
@@ -1955,7 +1955,7 @@ class MetricsHistory extends React.Component {
                 <PageSection className="metrics-history-section" variant={PageSectionVariants.light}>
                     <>
                         { this.state.hours.length > 0 &&
-                        <Card isPlain>
+                        <Card className="pf-m-wrap" isPlain>
                             <CardBody className="metrics-history">
                                 { this.state.hours.map((time, i) => {
                                     const showHeader = i == 0 || timeformat.date(time) != timeformat.date(this.state.hours[i - 1]);

pkg/networkmanager/firewall.jsx

@@ -188,7 +188,7 @@ function ZoneSection(props) {
 
     const actions = !firewall.readonly && <div className="zone-section-buttons">{addServiceAction}{deleteButton}</div>;
 
-    return <Card className="zone-section" data-id={props.zone.id}>
+    return <Card className="pf-m-wrap zone-section" data-id={props.zone.id}>
         <CardHeader actions={{ actions }} className="zone-section-heading">
             <Flex alignItems={{ default: 'alignSelfBaseline' }} spaceItems={{ default: 'spaceItemsXl' }}>
                 <CardTitle component="h2">

pkg/networkmanager/network-interface-members.jsx

@@ -192,7 +192,7 @@ export const NetworkInterfaceMembers = ({
     );
 
     return (
-        <Card id="network-interface-members" className="network-interface-members">
+        <Card id="network-interface-members" className="pf-m-wrap network-interface-members">
             <CardHeader actions={{ actions: add_btn }}>
                 <CardTitle component="h2">{_("Interface members")}</CardTitle>
             </CardHeader>

pkg/networkmanager/network-interface.jsx

@@ -709,7 +709,7 @@ export const NetworkInterfacePage = ({
             </PageSection>
             <PageSection>
                 <Gallery hasGutter>
-                    <Card className="network-interface-details">
+                    <Card className="pf-m-wrap network-interface-details">
                         <CardHeader actions={{
                             actions: (
                                 <>

pkg/networkmanager/network-main.jsx

@@ -153,7 +153,7 @@ export const NetworkPage = ({ privileged, operationInProgress, usage_monitor, pl
             </PageSection>
             <PageSection>
                 <Gallery hasGutter>
-                    {firewall.installed && <Card id="networking-firewall-summary">
+                    {firewall.installed && <Card className="pf-m-wrap" id="networking-firewall-summary">
                         <CardHeader actions={{
                             actions: <Button variant="secondary" id="networking-firewall-link"
                                         component="a"
@@ -175,7 +175,7 @@ export const NetworkPage = ({ privileged, operationInProgress, usage_monitor, pl
                             </Button>
                         </CardBody>
                     </Card>}
-                    <Card id="networking-interfaces">
+                    <Card className="pf-m-wrap" id="networking-interfaces">
                         <CardHeader actions={{ actions }}>
                             <CardTitle component="h2">{_("Interfaces")}</CardTitle>
                         </CardHeader>
@@ -190,7 +190,7 @@ export const NetworkPage = ({ privileged, operationInProgress, usage_monitor, pl
                                       rows={managed} />
                     </Card>
                     {unmanaged.length > 0 &&
-                    <Card id="networking-unmanaged-interfaces">
+                    <Card className="pf-m-wrap" id="networking-unmanaged-interfaces">
                         <CardHeader>
                             <CardTitle component="h2">{_("Unmanaged interfaces")}</CardTitle>
                         </CardHeader>

pkg/playground/react-demo-cards.jsx

@@ -26,21 +26,21 @@ import { Gallery, GalleryItem } from "@patternfly/react-core/dist/esm/layouts/Ga
 
 const CardsDemo = () => {
     const cards = [
-        <Card isCompact key="card1">
+        <Card className="pf-m-wrap" isCompact key="card1">
             <CardBody>I'm a card in a gallery</CardBody>
         </Card>,
-        <Card isCompact key="card2">
+        <Card className="pf-m-wrap" isCompact key="card2">
             <CardBody>I'm a card in a gallery</CardBody>
             <CardFooter>I have a footer</CardFooter>
         </Card>,
-        <Card isCompact key="card3">
+        <Card className="pf-m-wrap" isCompact key="card3">
             <CardBody>I'm a card in a gallery</CardBody>
         </Card>,
-        <Card isCompact key="card4">
+        <Card className="pf-m-wrap" isCompact key="card4">
             <CardTitle>I have a header too</CardTitle>
             <CardBody>I'm a card in a gallery</CardBody>
         </Card>,
-        <Card key="card5">
+        <Card className="pf-m-wrap" key="card5">
             <CardHeader actions={{
                 actions: <><input type="checkbox" />
                     <Button className="btn">click</Button></>,

pkg/sosreport/sosreport.jsx

@@ -485,7 +485,7 @@ const SOSBody = () => {
 
     return (
         <PageSection>
-            <Card className="ct-card">
+            <Card className="pf-m-wrap ct-card">
                 <CardHeader actions={{
                     actions: <Button id="create-button" variant="primary" onClick={run_report}>
                         {_("Run report")}

pkg/storaged/crypto-keyslots.jsx

@@ -875,7 +875,7 @@ export class CryptoKeyslots extends React.Component {
         const remaining = max_slots - keys.length;
 
         return (
-            <Card className="key-slot-panel">
+            <Card className="pf-m-wrap key-slot-panel">
                 <CardHeader actions={{
                     actions: <>
                         <span className="key-slot-panel-remaining">

pkg/storaged/jobs-panel.jsx

@@ -198,7 +198,7 @@ export class JobsPanel extends React.Component {
         jobs = jobs.sort(cmp_job);
 
         return (
-            <Card className="detail-jobs">
+            <Card className="pf-m-wrap detail-jobs">
                 <CardTitle component="h2">{_("Jobs")}</CardTitle>
                 <CardBody className="contains-list">
                     <DataList isCompact aria-label={_("Jobs")}>

pkg/systemd/hwinfo.jsx

@@ -337,15 +337,15 @@ class HardwareInfo extends React.Component {
                                                 : undefined } />
                             </CardBody>
                         </Card>
-                        <Card id="pci-listing">
+                        <Card className="pf-m-wrap" id="pci-listing">
                             <CardHeader>
                                 <CardTitle component="h2">{_("PCI")}</CardTitle>
                             </CardHeader>
                             <CardBody className="contains-list">
                                 { pci }
                             </CardBody>
                         </Card>
-                        <Card id="memory-listing">
+                        <Card className="pf-m-wrap" id="memory-listing">
                             <CardHeader>
                                 <CardTitle component="h2">{_("Memory")}</CardTitle>
                             </CardHeader>

pkg/systemd/overview-cards/configurationCard.jsx

@@ -58,7 +58,7 @@ export const ConfigurationCard = ({ hostname }) => {
 
     return (
         <>
-            <Card className="system-configuration">
+            <Card className="pf-m-wrap system-configuration">
                 <CardTitle>{_("Configuration")}</CardTitle>
                 <CardBody>
                     <table className="pf-v5-c-table pf-m-grid-md pf-m-compact">

pkg/systemd/overview-cards/healthCard.jsx

@@ -34,7 +34,7 @@ const _ = cockpit.gettext;
 export class HealthCard extends React.Component {
     render() {
         return (
-            <Card className="system-health">
+            <Card className="pf-m-wrap system-health">
                 <CardTitle>{_("Health")}</CardTitle>
                 <CardBody>
                     <ul className="system-health-events">

pkg/systemd/overview-cards/systemInformationCard.jsx

@@ -102,7 +102,7 @@ export class SystemInformationCard extends React.Component {
 
     render() {
         return (
-            <Card className="system-information">
+            <Card className="pf-m-wrap system-information">
                 <CardTitle>{_("System information")}</CardTitle>
                 <CardBody>
                     <table className="pf-v5-c-table pf-m-grid-md pf-m-compact">

pkg/systemd/overview-cards/usageCard.jsx

@@ -123,7 +123,7 @@ export class UsageCard extends React.Component {
         const cores_str = cockpit.format(cockpit.ngettext("of $0 CPU", "of $0 CPUs", this.state.numCpu), this.state.numCpu);
 
         return (
-            <Card className="system-usage">
+            <Card className="pf-m-wrap system-usage">
                 <CardTitle>{_("Usage")}</CardTitle>
                 <CardBody>
                     <table className="pf-v5-c-table pf-m-grid-md pf-m-compact">

pkg/systemd/service-details.jsx

@@ -606,7 +606,7 @@ export class ServiceDetails extends React.Component {
             });
 
         return (
-            <Card id="service-details-unit" className="ct-card">
+            <Card id="service-details-unit" className="pf-m-wrap ct-card">
                 { this.state.showDeleteDialog &&
                 <DeleteModal
                     name={this.props.unit.Description}

pkg/systemd/services.jsx

@@ -705,7 +705,7 @@ class ServicesPageBody extends React.Component {
 
         return (
             <PageSection>
-                <Card isCompact>
+                <Card className="pf-m-wrap" isCompact>
                     <ServicesPageFilters activeStateDropdownOptions={activeStateDropdownOptions}
                                          fileStateDropdownOptions={fileStateDropdownOptions}
                                          filtersRef={this.filtersRef}

pkg/users/account-logs-panel.jsx

@@ -71,7 +71,7 @@ export function AccountLogs({ name }) {
     }, [name]);
 
     return (
-        <Card id="account-logs">
+        <Card className="pf-m-wrap" id="account-logs">
             <CardTitle component="h2">{_("Login history")}</CardTitle>
             <CardBody className="contains-list">
                 <ListingTable variant="compact" aria-label={ _("Login history list") }