From b6703671e2fabe5796c34642b7357d25b2d27d91 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Tue, 27 Jul 2021 10:33:11 -0400
Subject: [PATCH] fix: Task progress svg shrinks width in some circumstances

---
 app/components/CircularProgressBar.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/app/components/CircularProgressBar.js b/app/components/CircularProgressBar.js
index b68bd4baa..c32b80973 100644
--- a/app/components/CircularProgressBar.js
+++ b/app/components/CircularProgressBar.js
@@ -1,6 +1,6 @@
 // @flow
 import React from "react";
-import { useTheme } from "styled-components";
+import styled, { useTheme } from "styled-components";
 
 const cleanPercentage = (percentage) => {
   const tooLow = !Number.isFinite(+percentage) || percentage < 0;
@@ -56,7 +56,7 @@ const CircularProgressBar = ({
   const offset = Math.floor(size / 2);
 
   return (
-    <svg width={size} height={size}>
+    <SVG width={size} height={size}>
       <g transform={`rotate(-90 ${offset} ${offset})`}>
         <Circle color={theme.progressBarBackground} offset={offset} />
         {percentage > 0 && (
@@ -67,8 +67,12 @@ const CircularProgressBar = ({
           />
         )}
       </g>
-    </svg>
+    </SVG>
   );
 };
 
+const SVG = styled.svg`
+  flex-shrink: 0;
+`;
+
 export default CircularProgressBar;