refactor: improve progress text position

Author: felixmosh

packages/ui/src/components/JobCard/Progress/Progress.module.css

@@ -21,7 +21,7 @@
 }
 
 .progress text {
-  font-size: 1.5rem;
+  font-size: 1.3rem;
   font-family: inherit;
   font-weight: 300;
   fill: var(--card-text-secondary-color);

packages/ui/src/components/JobCard/Progress/Progress.tsx

@@ -41,8 +41,8 @@ export const Progress = ({ progress, status, className, strokeWidth = 6 }: Progr
         transform="rotate(-90)"
         {...commonProps}
       />
-      <text textAnchor="middle" dominantBaseline="middle" x="50%" y="50%">
-        {Math.round(percentage)}%
+      <text x="50%" y="50%" textAnchor="middle" dominantBaseline="central">
+        <tspan dominantBaseline="central">{`${Math.round(percentage)}%`}</tspan>
       </text>
     </svg>
   );