From 0d81a5b410d4e008132bbdf973ea8377c1ebaac0 Mon Sep 17 00:00:00 2001
From: Garrett LeSage <garrett@redhat.com>
Date: Thu, 12 Oct 2023 12:07:51 +0200
Subject: [PATCH] =?UTF-8?q?Add=20wrap=20to=20all=20our=20cards=20?=
 =?UTF-8?q?=F0=9F=99=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pkg/lib/cockpit-components-logs-panel.jsx            |  2 +-
 pkg/lib/cockpit-components-modifications.jsx         |  2 +-
 pkg/metrics/metrics.jsx                              |  8 ++++----
 pkg/networkmanager/firewall.jsx                      |  2 +-
 pkg/networkmanager/network-interface-members.jsx     |  2 +-
 pkg/networkmanager/network-interface.jsx             |  2 +-
 pkg/networkmanager/network-main.jsx                  |  6 +++---
 pkg/playground/react-demo-cards.jsx                  | 10 +++++-----
 pkg/sosreport/sosreport.jsx                          |  2 +-
 pkg/storaged/crypto-keyslots.jsx                     |  2 +-
 pkg/storaged/jobs-panel.jsx                          |  2 +-
 pkg/systemd/hwinfo.jsx                               |  4 ++--
 pkg/systemd/overview-cards/configurationCard.jsx     |  2 +-
 pkg/systemd/overview-cards/healthCard.jsx            |  2 +-
 pkg/systemd/overview-cards/systemInformationCard.jsx |  2 +-
 pkg/systemd/overview-cards/usageCard.jsx             |  2 +-
 pkg/systemd/service-details.jsx                      |  2 +-
 pkg/systemd/services.jsx                             |  2 +-
 pkg/users/account-logs-panel.jsx                     |  2 +-
 19 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/pkg/lib/cockpit-components-logs-panel.jsx b/pkg/lib/cockpit-components-logs-panel.jsx
index 9887252bd5d..cdd5dcd4af4 100644
--- a/pkg/lib/cockpit-components-logs-panel.jsx
+++ b/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>
diff --git a/pkg/lib/cockpit-components-modifications.jsx b/pkg/lib/cockpit-components-modifications.jsx
index c985707b4b5..3dc070a0124 100644
--- a/pkg/lib/cockpit-components-modifications.jsx
+++ b/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 &&
diff --git a/pkg/metrics/metrics.jsx b/pkg/metrics/metrics.jsx
index 16815617195..6ff06b8ffe3 100644
--- a/pkg/metrics/metrics.jsx
+++ b/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]);
diff --git a/pkg/networkmanager/firewall.jsx b/pkg/networkmanager/firewall.jsx
index a0acddc590c..c637ca47458 100644
--- a/pkg/networkmanager/firewall.jsx
+++ b/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">
diff --git a/pkg/networkmanager/network-interface-members.jsx b/pkg/networkmanager/network-interface-members.jsx
index df322eee965..20b76af292c 100644
--- a/pkg/networkmanager/network-interface-members.jsx
+++ b/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>
diff --git a/pkg/networkmanager/network-interface.jsx b/pkg/networkmanager/network-interface.jsx
index 6211197ca31..a80b9751ed7 100644
--- a/pkg/networkmanager/network-interface.jsx
+++ b/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: (
                                 <>
diff --git a/pkg/networkmanager/network-main.jsx b/pkg/networkmanager/network-main.jsx
index b623889d3af..6be443329dd 100644
--- a/pkg/networkmanager/network-main.jsx
+++ b/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>
diff --git a/pkg/playground/react-demo-cards.jsx b/pkg/playground/react-demo-cards.jsx
index 79ebc36c83e..e47e88a4f4a 100644
--- a/pkg/playground/react-demo-cards.jsx
+++ b/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></>,
diff --git a/pkg/sosreport/sosreport.jsx b/pkg/sosreport/sosreport.jsx
index e451bf449ce..53d65b4cdff 100644
--- a/pkg/sosreport/sosreport.jsx
+++ b/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")}
diff --git a/pkg/storaged/crypto-keyslots.jsx b/pkg/storaged/crypto-keyslots.jsx
index f8e86f5f7d6..79aa429e9fe 100644
--- a/pkg/storaged/crypto-keyslots.jsx
+++ b/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">
diff --git a/pkg/storaged/jobs-panel.jsx b/pkg/storaged/jobs-panel.jsx
index dd544dd9c80..7fa05bd1ea7 100644
--- a/pkg/storaged/jobs-panel.jsx
+++ b/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")}>
diff --git a/pkg/systemd/hwinfo.jsx b/pkg/systemd/hwinfo.jsx
index 53e9713904c..69005539075 100644
--- a/pkg/systemd/hwinfo.jsx
+++ b/pkg/systemd/hwinfo.jsx
@@ -337,7 +337,7 @@ 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>
@@ -345,7 +345,7 @@ class HardwareInfo extends React.Component {
                                 { pci }
                             </CardBody>
                         </Card>
-                        <Card id="memory-listing">
+                        <Card className="pf-m-wrap" id="memory-listing">
                             <CardHeader>
                                 <CardTitle component="h2">{_("Memory")}</CardTitle>
                             </CardHeader>
diff --git a/pkg/systemd/overview-cards/configurationCard.jsx b/pkg/systemd/overview-cards/configurationCard.jsx
index 85f9c84356e..f4c18fc1101 100644
--- a/pkg/systemd/overview-cards/configurationCard.jsx
+++ b/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">
diff --git a/pkg/systemd/overview-cards/healthCard.jsx b/pkg/systemd/overview-cards/healthCard.jsx
index 33373a71a22..babb981b198 100644
--- a/pkg/systemd/overview-cards/healthCard.jsx
+++ b/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">
diff --git a/pkg/systemd/overview-cards/systemInformationCard.jsx b/pkg/systemd/overview-cards/systemInformationCard.jsx
index a949d90b318..ccdbf617c77 100644
--- a/pkg/systemd/overview-cards/systemInformationCard.jsx
+++ b/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">
diff --git a/pkg/systemd/overview-cards/usageCard.jsx b/pkg/systemd/overview-cards/usageCard.jsx
index 79fd734096c..242cf379bcc 100644
--- a/pkg/systemd/overview-cards/usageCard.jsx
+++ b/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">
diff --git a/pkg/systemd/service-details.jsx b/pkg/systemd/service-details.jsx
index 8e6a080ff5d..6b262f6cffb 100644
--- a/pkg/systemd/service-details.jsx
+++ b/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}
diff --git a/pkg/systemd/services.jsx b/pkg/systemd/services.jsx
index 86377623a5c..ff2b15bdc9f 100644
--- a/pkg/systemd/services.jsx
+++ b/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}
diff --git a/pkg/users/account-logs-panel.jsx b/pkg/users/account-logs-panel.jsx
index ba2f1ffc601..51b26ae90a7 100644
--- a/pkg/users/account-logs-panel.jsx
+++ b/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") }