[Fleet] adjust ux on manage auto-upgrade agents (#212089)

Adjust UX of manage auto-upgrade agents status based on this comment:
https://github.com/elastic/kibana/pull/210866#issuecomment-2674610055

<img width="990" alt="image"
src="https://github.com/user-attachments/assets/4aceb64b-1ac6-429a-89c5-cbce7615b5a5"
/>

x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/components/manage_auto_upgrade_agents_modal/index.tsx

@@ -199,7 +199,7 @@ const TargetVersionsRow: React.FunctionComponent<{
 
   return (
     <EuiFlexGroup direction="row" alignItems="stretch">
-      <EuiFlexItem>
+      <EuiFlexItem grow={false}>
         <EuiFormRow
           label={
             <>
@@ -230,7 +230,7 @@ const TargetVersionsRow: React.FunctionComponent<{
           />
         </EuiFormRow>
       </EuiFlexItem>
-      <EuiFlexItem>
+      <EuiFlexItem grow={false}>
         <EuiFormRow
           label={
             <>

x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/components/manage_auto_upgrade_agents_modal/status_column.tsx

@@ -6,7 +6,14 @@
  */
 
 import React, { useCallback, useMemo } from 'react';
-import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiText, EuiToolTip } from '@elastic/eui';
+import {
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiText,
+  EuiToolTip,
+} from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n-react';
 
@@ -34,7 +41,7 @@ export const StatusColumn: React.FunctionComponent<{
 
   const calcPercentage = useCallback(
     (agents: number): number =>
-      autoUpgradeAgentsStatus
+      autoUpgradeAgentsStatus && autoUpgradeAgentsStatus.totalAgents > 0
         ? Math.round((agents / autoUpgradeAgentsStatus.totalAgents) * 100)
         : 0,
     [autoUpgradeAgentsStatus]
@@ -57,7 +64,8 @@ export const StatusColumn: React.FunctionComponent<{
 
   const currentStatus = useMemo(() => {
     const inProgressStatus = (
-      <EuiButtonEmpty size="s" iconType="clock" href={getAgentsHref(false)}>
+      <EuiButtonEmpty size="s" href={getAgentsHref(false)} color="text">
+        <EuiIcon type="clock" />{' '}
         <FormattedMessage
           id="xpack.fleet.manageAutoUpgradeAgents.inProgressText"
           defaultMessage="In progress"
@@ -65,7 +73,8 @@ export const StatusColumn: React.FunctionComponent<{
       </EuiButtonEmpty>
     );
     const failedStatus = (
-      <EuiButtonEmpty size="s" iconType="errorFilled" color="danger" href={getAgentsHref(true)}>
+      <EuiButtonEmpty size="s" href={getAgentsHref(true)} color="text">
+        <EuiIcon type="errorFilled" color="danger" />{' '}
         <FormattedMessage
           id="xpack.fleet.manageAutoUpgradeAgents.failedText"
           defaultMessage="Upgrade failed"
@@ -73,12 +82,8 @@ export const StatusColumn: React.FunctionComponent<{
       </EuiButtonEmpty>
     );
     const completedStatus = (
-      <EuiButtonEmpty
-        size="s"
-        iconType="checkInCircleFilled"
-        color="success"
-        href={getAgentsHref(false)}
-      >
+      <EuiButtonEmpty size="s" href={getAgentsHref(false)} color="text">
+        <EuiIcon type="checkInCircleFilled" color="success" />{' '}
         <FormattedMessage
           id="xpack.fleet.manageAutoUpgradeAgents.completedText"
           defaultMessage="Completed"
@@ -86,7 +91,8 @@ export const StatusColumn: React.FunctionComponent<{
       </EuiButtonEmpty>
     );
     const notStartedStatus = (
-      <EuiButtonEmpty size="s" iconType="minusInCircle" color="text">
+      <EuiButtonEmpty size="s" color="text">
+        <EuiIcon type="minusInCircle" color="text" />{' '}
         <FormattedMessage
           id="xpack.fleet.manageAutoUpgradeAgents.notStartedText"
           defaultMessage="Not started"
@@ -136,11 +142,13 @@ export const StatusColumn: React.FunctionComponent<{
   }, [agentVersionCounts, percentage, calcPercentage, getAgentsHref]);
 
   return (
-    <EuiFlexGroup direction="row" gutterSize="s" alignItems="center">
-      <EuiFlexItem grow={false}>
+    <EuiFlexGroup direction="row" gutterSize="s" alignItems="center" justifyContent="flexStart">
+      <EuiFlexItem grow={1}>
         <EuiText size="s">{currentPercentage}</EuiText>
       </EuiFlexItem>
-      <EuiFlexItem component="span">{currentStatus}</EuiFlexItem>
+      <EuiFlexItem component="span" grow={4}>
+        {currentStatus}
+      </EuiFlexItem>
     </EuiFlexGroup>
   );
 };

x-pack/platform/plugins/shared/fleet/server/services/epm/registry/index.ts

@@ -124,6 +124,10 @@ async function _fetchFindLatestPackage(
 
         const latestPackageFromRegistry = searchResults[0] ?? null;
 
+        if (bundledPackage && !latestPackageFromRegistry) {
+          return bundledPackage;
+        }
+
         if (
           bundledPackage &&
           semverGte(bundledPackage.version, latestPackageFromRegistry.version)