refactor: improve progress text position

felixmosh · Jan 22, 2025 · 42e4127 · 42e4127
1 parent 1990285
commit 42e4127
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/packages/ui/src/components/JobCard/Progress/Progress.module.css b/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);

diff --git a/packages/ui/src/components/JobCard/Progress/Progress.tsx b/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>
   );