From 8b50d63a65d92d182761b4dc739b2eaa5b99e34c Mon Sep 17 00:00:00 2001
From: Ashraf Masarwa <asmasarw@redhat.com>
Date: Tue, 3 Nov 2026 15:12:08 +0200
Subject: [PATCH 1/2] EDM-6461: Dashboard Status donut charts are not centered
 in the container

---
 .../src/components/charts/DonutChart.css              |  4 ++++
 .../src/components/charts/DonutChart.tsx              |  2 +-
 .../src/components/common/WithHelperText.tsx          | 11 +++++++++--
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/libs/ui-components/src/components/charts/DonutChart.css b/libs/ui-components/src/components/charts/DonutChart.css
index 301f9e3aae..e045b885ff 100644
--- a/libs/ui-components/src/components/charts/DonutChart.css
+++ b/libs/ui-components/src/components/charts/DonutChart.css
@@ -13,3 +13,7 @@
   color: var(--pf-t--global--text--color--subtle);
   font-size: 0.85rem;
 }
+
+.fctl-charts__title .fctl-label-withhelpertext {
+  gap: var(--pf-t--global--spacer--sm);
+}
diff --git a/libs/ui-components/src/components/charts/DonutChart.tsx b/libs/ui-components/src/components/charts/DonutChart.tsx
index bdbb8f49a7..9734196116 100644
--- a/libs/ui-components/src/components/charts/DonutChart.tsx
+++ b/libs/ui-components/src/components/charts/DonutChart.tsx
@@ -91,7 +91,7 @@ const DonutChart = ({ data, title, helperText }: { data: Data[]; title: string;
               alignContent={{ default: 'alignContentCenter' }}
               className="fctl-charts__title"
             >
-              {helperText ? <LabelWithHelperText label={title} content={helperText} /> : title}
+              {helperText ? <LabelWithHelperText label={title} content={helperText} hasNoPadding /> : title}
             </Flex>
           </foreignObject>
           <ChartDonut
diff --git a/libs/ui-components/src/components/common/WithHelperText.tsx b/libs/ui-components/src/components/common/WithHelperText.tsx
index f221a0977d..b5dd29f8bd 100644
--- a/libs/ui-components/src/components/common/WithHelperText.tsx
+++ b/libs/ui-components/src/components/common/WithHelperText.tsx
@@ -7,6 +7,7 @@ import './WithHelperText.css';
 type HelperTextPopoverProps = {
   label: string;
   isInline?: boolean;
+  hasNoPadding?: boolean;
   triggerAction?: 'click' | 'hover';
   content: React.ReactNode;
 };
@@ -19,6 +20,7 @@ const HelperTextPopover = ({
   ariaLabel,
   content,
   triggerAction,
+  hasNoPadding,
 }: Omit<HelperTextPopoverProps, 'label'> & { ariaLabel: string }) => (
   <Popover aria-label={ariaLabel} bodyContent={content} withFocusTrap triggerAction={triggerAction}>
     <Button
@@ -26,6 +28,7 @@ const HelperTextPopover = ({
       component="a"
       isInline
       variant="plain"
+      hasNoPadding={hasNoPadding}
       onClick={(ev) => {
         ev.preventDefault();
         ev.stopPropagation();
@@ -41,10 +44,11 @@ const LabelWithHelperText = ({
   isInline,
   content,
   triggerAction,
+  hasNoPadding,
 }: HelperTextPopoverProps & { hideLabel?: boolean }) => (
   <span className={`fctl-label-withhelpertext${isInline ? ' fctl-label-withhelpertext--inline' : ''}`}>
     {!hideLabel && label}
-    <HelperTextPopover ariaLabel={label} content={content} triggerAction={triggerAction} />
+    <HelperTextPopover ariaLabel={label} content={content} triggerAction={triggerAction} hasNoPadding={hasNoPadding} />
   </span>
 );
 
@@ -52,11 +56,14 @@ export const FormGroupWithHelperText = ({
   label,
   isRequired,
   content,
+  hasNoPadding,
   children,
 }: React.PropsWithChildren<FormGroupWithHelperTextProps>) => (
   <FormGroup
     label={label}
-    labelHelp={content ? <HelperTextPopover ariaLabel={label} content={content} /> : undefined}
+    labelHelp={
+      content ? <HelperTextPopover ariaLabel={label} content={content} hasNoPadding={hasNoPadding} /> : undefined
+    }
     isRequired={isRequired}
   >
     {children}

From e4021365834371468ddf7e538ad53f808d0ed430 Mon Sep 17 00:00:00 2001
From: Ashraf Masarwa <asmasarw@redhat.com>
Date: Wed, 4 Nov 2026 10:13:19 +0200
Subject: [PATCH 2/2] Fix Donuts Spaces

---
 .../OverviewPage/Cards/Status/StatusCard.tsx  | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/libs/ui-components/src/components/OverviewPage/Cards/Status/StatusCard.tsx b/libs/ui-components/src/components/OverviewPage/Cards/Status/StatusCard.tsx
index cc6020f4f5..2e11fdaac9 100644
--- a/libs/ui-components/src/components/OverviewPage/Cards/Status/StatusCard.tsx
+++ b/libs/ui-components/src/components/OverviewPage/Cards/Status/StatusCard.tsx
@@ -7,8 +7,8 @@ import {
   CardTitle,
   Content,
   ContentVariants,
-  Flex,
-  FlexItem,
+  Grid,
+  GridItem,
   Spinner,
   Stack,
   StackItem,
@@ -52,25 +52,25 @@ const StatusCard = () => {
           </Content>
         </StackItem>
         <StackItem>
-          <Flex justifyContent={{ default: 'justifyContentSpaceAround' }}>
-            <FlexItem>
+          <Grid hasGutter>
+            <GridItem md={4}>
               <ApplicationStatusChart
                 applicationStatus={devicesSummary?.applicationStatus || {}}
                 labels={labels}
                 fleets={fleets}
               />
-            </FlexItem>
-            <FlexItem>
+            </GridItem>
+            <GridItem md={4}>
               <DeviceStatusChart deviceStatus={devicesSummary?.summaryStatus || {}} labels={labels} fleets={fleets} />
-            </FlexItem>
-            <FlexItem>
+            </GridItem>
+            <GridItem md={4}>
               <SystemUpdateStatusChart
                 updatedStatus={devicesSummary?.updateStatus || {}}
                 labels={labels}
                 fleets={fleets}
               />
-            </FlexItem>
-          </Flex>
+            </GridItem>
+          </Grid>
         </StackItem>
       </Stack>
     );