Fix lint errors from styled-components callback returns

Author: Copilot

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

@@ -13,7 +13,7 @@ import { styled } from "styled-components";
 
 const StyledDataGrid = styled.div<{ $gridTemplateColumns: string | number }>`
   display: grid;
-  grid-template-columns: ${(props) => props.$gridTemplateColumns};
+  grid-template-columns: ${(props) => `${props.$gridTemplateColumns}`};
   box-sizing: border-box;
   width: 100%;
   background: transparent;

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

@@ -7,7 +7,7 @@ const StyledButton = styled.button<{ $size?: Size }>`
   color: var(--vscode-textLink-foreground);
   border: none;
   cursor: pointer;
-  font-size: ${(props) => props.$size ?? "1em"};
+  font-size: ${(props) => (props.$size ? `${props.$size}` : "1em")};
   padding: 0;
 `;
 

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

@@ -17,7 +17,7 @@ const TableContainer = styled.div<TableContainerProps>`
   // minimum width of 1fr is auto, not 0.
   // https://css-tricks.com/equal-width-columns-in-css-grid-are-kinda-weird/
   grid-template-columns: repeat(
-    ${(props) => props.$columnCount},
+    ${(props) => Number(props.$columnCount)},
     minmax(0, 1fr)
   );
   max-width: 45rem;