From c4d7e2f66ca36df67d6764ff2aca507240f1d2e9 Mon Sep 17 00:00:00 2001
From: Bergasha <bergasha@hotmail.com>
Date: Wed, 10 Jun 2026 15:49:25 +1000
Subject: [PATCH] Refactor Docker component layout

Refactor component layout and remove redundant Group elements.
---
 packages/widgets/src/docker/component.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/widgets/src/docker/component.tsx b/packages/widgets/src/docker/component.tsx
index 769c13e20..8f501461d 100644
--- a/packages/widgets/src/docker/component.tsx
+++ b/packages/widgets/src/docker/component.tsx
@@ -123,7 +123,7 @@ const createColumns = (
     enableSorting: false,
     Cell({ row }) {
       const utils = clientApi.useUtils();
-      
+      // eslint-disable-next-line no-restricted-syntax
       const onSettled = async () => {
         await utils.docker.getContainers.invalidate();
       };
@@ -272,22 +272,22 @@ export default function DockerWidget({ options, width, isEditMode }: WidgetCompo
           }}
           p={4}
         >
+          <Group gap={4}>
+            <IconBrandDocker size={20} />
+            <Text size="sm">{t("table.footer", { count: totalContainers.toString() })}</Text>
+          </Group>
+
           <Group gap="xl">
-            <Group gap={4}>
-              <IconBrandDocker size={20} />
-              <Text size="sm">{t("table.footer", { count: totalContainers.toString() })}</Text>
-            </Group>
-            
-            <Text size="sm" c="green.5">
+            <Text size="sm" c={cpuUsageColor(totals.cpu, "running")}>
               Total CPU: {totals.cpu.toFixed(2)}%
             </Text>
             
-            <Text size="sm" c="orange.5">
+            <Text size="sm" c={memoryUsageColor(totals.memory, "running")}>
               Total Mem: {humanFileSize(totals.memory)}
             </Text>
-          </Group>
 
-          <Text size="sm">{t("table.updated", { when: relativeTime })}</Text>
+            <Text size="sm">{t("table.updated", { when: relativeTime })}</Text>
+          </Group>
         </Group>
       )}
     </Stack>