Merge pull request #4523 from github/dependabot/npm_and_yarn/extensions/ql-vscode/styled-components-6.5.3

Bump styled-components from 6.4.1 to 6.5.3 in /extensions/ql-vscode

Author: josefs

extensions/ql-vscode/package-lock.json

@@ -2094,7 +2094,7 @@
     "source-map": "^0.7.6",
     "source-map-support": "^0.5.21",
     "stream-json": "^1.9.1",
-    "styled-components": "^6.4.1",
+    "styled-components": "^6.5.3",
     "tmp": "^0.2.7",
     "tmp-promise": "^3.0.2",
     "tree-kill": "^1.2.2",

extensions/ql-vscode/package.json

@@ -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/DataGrid.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/common/TextButton.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;