diff --git a/extensions/ql-vscode/package-lock.json b/extensions/ql-vscode/package-lock.json
index 233acf788cf..4ba2dddd45f 100644
--- a/extensions/ql-vscode/package-lock.json
+++ b/extensions/ql-vscode/package-lock.json
@@ -36,7 +36,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",
@@ -27293,9 +27293,9 @@
       }
     },
     "node_modules/styled-components": {
-      "version": "6.4.1",
-      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.4.1.tgz",
-      "integrity": "sha512-ADu2dF53esUzzM4I0ewxhxFtsDd6v4V6dNkg3vG0iFKhnt06sJneTZnRvujAosZwW0XD58IKgGMQoqri4wHRqg==",
+      "version": "6.5.3",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.5.3.tgz",
+      "integrity": "sha512-vAX79sfpmUerP9fsTTxoTrBDE0RuO4ahjInyWYoohNgqrdg63Ms4q6FJ/o2Fyity82NU3cujOT8Ewl9TThBdwg==",
       "license": "MIT",
       "dependencies": {
         "@emotion/is-prop-valid": "1.4.0",
diff --git a/extensions/ql-vscode/package.json b/extensions/ql-vscode/package.json
index 9efc72aae8c..3a374a30c35 100644
--- a/extensions/ql-vscode/package.json
+++ b/extensions/ql-vscode/package.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",
diff --git a/extensions/ql-vscode/src/view/common/DataGrid.tsx b/extensions/ql-vscode/src/view/common/DataGrid.tsx
index 2dc3bfa95ad..2ef5f00cf2d 100644
--- a/extensions/ql-vscode/src/view/common/DataGrid.tsx
+++ b/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;
diff --git a/extensions/ql-vscode/src/view/common/TextButton.tsx b/extensions/ql-vscode/src/view/common/TextButton.tsx
index b91a6ab9474..89daec7644a 100644
--- a/extensions/ql-vscode/src/view/common/TextButton.tsx
+++ b/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;
 `;
 
diff --git a/extensions/ql-vscode/src/view/variant-analysis/RawResultsTable.tsx b/extensions/ql-vscode/src/view/variant-analysis/RawResultsTable.tsx
index 9a344fa710c..785b67282ad 100644
--- a/extensions/ql-vscode/src/view/variant-analysis/RawResultsTable.tsx
+++ b/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;