From 77ef061c15d3249f60decafa1d009a482fe145cd Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Sun, 21 Jun 2026 20:19:37 +0100
Subject: [PATCH] Refactor UpdateStage component in AppUpdateProgress to
 streamline progress display and detail rendering, enhancing clarity and
 organization of update status information.

---
 .../AppUpdates/AppUpdateProgress.jsx          | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/Dashboard/Management/AppUpdates/AppUpdateProgress.jsx b/src/components/Dashboard/Management/AppUpdates/AppUpdateProgress.jsx
index a6e4b3d..b4fa95e 100644
--- a/src/components/Dashboard/Management/AppUpdates/AppUpdateProgress.jsx
+++ b/src/components/Dashboard/Management/AppUpdates/AppUpdateProgress.jsx
@@ -101,28 +101,28 @@ const UpdateStage = ({ stage, status, percent, detail }) => {
         : StageIcon
 
   return (
-    <Flex vertical gap={4}>
-      <Flex align='center' gap='middle'>
-        <StatusIcon style={{ fontSize: 20, color, flexShrink: 0 }} />
-        <Flex align='center' gap='small' style={{ flex: 1, minWidth: 0 }}>
-          <Text style={{ flexShrink: 0, minWidth: 96 }}>
-            {config.labels[resolvedStatus]}
-          </Text>
-          {showProgress && (
+    <Flex align='center' gap='middle'>
+      <StatusIcon style={{ fontSize: 20, color, flexShrink: 0 }} />
+      <Flex align='center' gap='small' style={{ flex: 1, minWidth: 0 }}>
+        <Text style={{ flexShrink: 0, minWidth: 96 }}>
+          {config.labels[resolvedStatus]}
+        </Text>
+        {showProgress && (
+          <Flex vertical gap={4}>
             <Progress
               percent={resolvedPercent}
               status={getProgressStatus(resolvedStatus)}
               showInfo={typeof resolvedPercent === 'number'}
               style={{ flex: 1, margin: 0 }}
             />
-          )}
-        </Flex>
+            {detail && (
+              <Text type='secondary' style={{ marginLeft: 36 }}>
+                {detail}
+              </Text>
+            )}
+          </Flex>
+        )}
       </Flex>
-      {detail && (
-        <Text type='secondary' style={{ marginLeft: 36 }}>
-          {detail}
-        </Text>
-      )}
     </Flex>
   )
 }