Fix bottom padding removal on SummaryClustersCard

Signed-off-by: Kevin Cormier <[email protected]>
stolostron · Nov 22, 2024 · a9479c8 · a9479c8
1 parent 18e811c
commit a9479c8
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 10 deletions.
diff --git a/frontend/src/routes/Home/Overview/components/SummaryClustersCard.tsx b/frontend/src/routes/Home/Overview/components/SummaryClustersCard.tsx
@@ -116,8 +116,12 @@ export function SummaryClustersCard(props: {
 
   return (
     <div>
-      <Card id={`${title.toLowerCase().replace(/\s+/g, '-')}-chart`} isRounded style={{ height: '200px' }}>
-        <CardTitle style={{ paddingBottom: 0 }}>{title}</CardTitle>
+      <Card
+        id={`${title.toLowerCase().replace(/\s+/g, '-')}-chart`}
+        isRounded
+        style={{ height: '200px', ['--pf-v5-c-card__title--not--last-child--PaddingBottom' as any]: 0 }}
+      >
+        <CardTitle>{title}</CardTitle>
         <div style={{ display: 'flex', height: '150px' }}>
           <div style={{ width: '150px', marginRight: '16px' }}>{chart}</div>
           {legend}

diff --git a/frontend/src/ui-components/AcmCharts/AcmDonutChart/AcmDonutChart.tsx b/frontend/src/ui-components/AcmCharts/AcmDonutChart/AcmDonutChart.tsx
@@ -33,9 +33,7 @@ const getStyles = (props: StyleProps) => ({
     '& .pf-v5-c-chart > svg g path:last-of-type': {
       fill: props.danger ? '#E62325 !important' : undefined,
     },
-  }),
-  cardTitle: css({
-    paddingBottom: 'unset !important',
+    '--pf-v5-c-card__title--not--last-child--PaddingBottom': 0,
   }),
   chartContainer: css({
     maxWidth: '376px',
@@ -45,10 +43,7 @@ const getStyles = (props: StyleProps) => ({
   }),
 })
 
-export const loadingDonutChart = (
-  title: string,
-  classes: Record<'card' | 'cardTitle' | 'chartContainer' | 'skeleton', string>
-) => {
+export const loadingDonutChart = (title: string, classes: Record<'card' | 'chartContainer' | 'skeleton', string>) => {
   return (
     <Card>
       <CardTitle>{title}</CardTitle>
@@ -119,7 +114,7 @@ export function AcmDonutChart(props: {
   if (props.loading) return loadingDonutChart(props.title, classes)
   return (
     <Card className={classes.card} id={`${props.title.toLowerCase().replace(/\s+/g, '-')}-chart`}>
-      <CardTitle className={classes.cardTitle}>
+      <CardTitle>
         {props.title} <Badge isRead>{badgeTotal}</Badge>
       </CardTitle>
       <div className={classes.chartContainer}>