fix: Task progress svg shrinks width in some circumstances

This commit is contained in:
Tom Moor
2021-07-27 10:33:11 -04:00
parent 84f647674a
commit b6703671e2

View File

@ -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;