Use transient prop for HorizontalSpace component

Author: koesie10

extensions/ql-vscode/src/view/common/HorizontalSpace.tsx

@@ -1,7 +1,7 @@
 import { styled } from "styled-components";
 
-export const HorizontalSpace = styled.div<{ size: 1 | 2 | 3 }>`
+export const HorizontalSpace = styled.div<{ $size: 1 | 2 | 3 }>`
   flex: 0 0 auto;
   display: inline-block;
-  width: ${(props) => 0.2 * props.size}em;
+  width: ${(props) => 0.2 * props.$size}em;
 `;

extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisRepositoriesStats.tsx

@@ -27,29 +27,29 @@ function getIcon(
     if (variantAnalysisStatus === VariantAnalysisStatus.Canceled) {
       return (
         <>
-          <HorizontalSpace size={2} />
+          <HorizontalSpace $size={2} />
           <ErrorIcon label="Some analyses were stopped" />
         </>
       );
     } else {
       return (
         <>
-          <HorizontalSpace size={2} />
+          <HorizontalSpace $size={2} />
           <ErrorIcon label="Some analyses failed" />
         </>
       );
     }
   } else if (skippedRepositoryCount > 0) {
     return (
       <>
-        <HorizontalSpace size={2} />
+        <HorizontalSpace $size={2} />
         <WarningIcon label="Some repositories were skipped" />
       </>
     );
   } else if (variantAnalysisStatus === VariantAnalysisStatus.Succeeded) {
     return (
       <>
-        <HorizontalSpace size={2} />
+        <HorizontalSpace $size={2} />
         <SuccessIcon label="Completed" />
       </>
     );
@@ -68,7 +68,7 @@ export const VariantAnalysisRepositoriesStats = ({
   if (variantAnalysisStatus === VariantAnalysisStatus.Failed) {
     return (
       <>
-        0<HorizontalSpace size={2} />
+        <HorizontalSpace $size={2} />
         <ErrorIcon label="Variant analysis failed" />
       </>
     );