Use transient prop for VerticalSpace component

Author: koesie10

extensions/ql-vscode/src/view/common/FileCodeSnippet/CodeSnippetMessage.tsx

@@ -86,7 +86,7 @@ export const CodeSnippetMessage = ({
         })}
         {children && (
           <>
-            <VerticalSpace size={2} />
+            <VerticalSpace $size={2} />
             {children}
           </>
         )}

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

@@ -1,6 +1,6 @@
 import { styled } from "styled-components";
 
-export const VerticalSpace = styled.div<{ size: 1 | 2 | 3 }>`
+export const VerticalSpace = styled.div<{ $size: 1 | 2 | 3 }>`
   flex: 0 0 auto;
-  height: ${(props) => 0.5 * props.size}em;
+  height: ${(props) => 0.5 * props.$size}em;
 `;

extensions/ql-vscode/src/view/data-flow-paths/DataFlowPaths.tsx

@@ -48,9 +48,9 @@ export const DataFlowPaths = ({
 
   return (
     <>
-      <VerticalSpace size={2} />
+      <VerticalSpace $size={2} />
       <SectionTitle>{ruleDescription}</SectionTitle>
-      <VerticalSpace size={2} />
+      <VerticalSpace $size={2} />
 
       <PathsContainer>
         <PathDetailsContainer>
@@ -66,7 +66,7 @@ export const DataFlowPaths = ({
         </PathDropdownContainer>
       </PathsContainer>
 
-      <VerticalSpace size={2} />
+      <VerticalSpace $size={2} />
       <CodePath
         codeFlow={selectedCodeFlow}
         severity={severity}