fix: spinner should resize correctly

auditjs.json

@@ -1084,6 +1084,22 @@
           "reference": "https://ossindex.sonatype.org/vulnerability/CVE-2022-25883?component-type=npm&component-name=semver&utm_source=auditjs&utm_medium=integration&utm_content=4.0.39"
         }
       ]
+    },
+    {
+      "coordinates": "pkg:npm/[email protected]",
+      "description": "A Query Language and Runtime which can target any service.",
+      "reference": "https://ossindex.sonatype.org/component/pkg:npm/[email protected]?utm_source=auditjs&utm_medium=integration&utm_content=4.0.39",
+      "vulnerabilities": [
+        {
+          "id": "CVE-2023-26144",
+          "title": "[CVE-2023-26144] CWE-400: Uncontrolled Resource Consumption ('Resource Exhaustion')",
+          "description": "Versions of the package graphql from 16.3.0 and before 16.8.1 are vulnerable to Denial of Service (DoS) due to insufficient checks in the OverlappingFieldsCanBeMergedRule.ts file when parsing large queries. This vulnerability allows an attacker to degrade system performance.\r\r**Note:** It was not proven that this vulnerability can crash the process.",
+          "cvssScore": 5.3,
+          "cvssVector": "CVSS:3.1/AV:N/AC:L/PR:N/UI:N/S:U/C:N/I:N/A:L",
+          "cve": "CVE-2023-26144",
+          "reference": "https://ossindex.sonatype.org/vulnerability/CVE-2023-26144?component-type=npm&component-name=graphql&utm_source=auditjs&utm_medium=integration&utm_content=4.0.39"
+        }
+      ]
     }
   ],
   "ignore": [
@@ -1293,6 +1309,9 @@
     },
     {
       "id": "CVE-2023-26136"
+    },
+    {
+      "id": "CVE-2023-26144"
     }
   ]
 }

system/core/src/components/Spinner.ts

@@ -32,6 +32,8 @@ export const beforeStyles = css`
   ${positioningStyles}
   -webkit-mask-image: url('data:image/svg+xml; utf8, <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.5 10C17.5 11.4834 17.0601 12.9334 16.236 14.1668C15.4119 15.4001 14.2406 16.3614 12.8701 16.9291C11.4997 17.4968 9.99168 17.6453 8.53682 17.3559C7.08196 17.0665 5.74559 16.3522 4.6967 15.3033C3.64781 14.2544 2.9335 12.918 2.64411 11.4632C2.35472 10.0083 2.50325 8.50032 3.0709 7.12987C3.63856 5.75943 4.59985 4.58809 5.83322 3.76398C7.06659 2.93987 8.51664 2.5 10 2.5V4.375C8.88748 4.375 7.79994 4.7049 6.87492 5.32298C5.94989 5.94107 5.22892 6.81957 4.80318 7.84741C4.37743 8.87524 4.26604 10.0062 4.48308 11.0974C4.70012 12.1885 5.23585 13.1908 6.02252 13.9775C6.80919 14.7641 7.81147 15.2999 8.90262 15.5169C9.99376 15.734 11.1248 15.6226 12.1526 15.1968C13.1804 14.7711 14.0589 14.0501 14.677 13.1251C15.2951 12.2001 15.625 11.1125 15.625 10H17.5Z" fill="currentColor"/></svg>');
   mask-image: url('data:image/svg+xml; utf8, <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.5 10C17.5 11.4834 17.0601 12.9334 16.236 14.1668C15.4119 15.4001 14.2406 16.3614 12.8701 16.9291C11.4997 17.4968 9.99168 17.6453 8.53682 17.3559C7.08196 17.0665 5.74559 16.3522 4.6967 15.3033C3.64781 14.2544 2.9335 12.918 2.64411 11.4632C2.35472 10.0083 2.50325 8.50032 3.0709 7.12987C3.63856 5.75943 4.59985 4.58809 5.83322 3.76398C7.06659 2.93987 8.51664 2.5 10 2.5V4.375C8.88748 4.375 7.79994 4.7049 6.87492 5.32298C5.94989 5.94107 5.22892 6.81957 4.80318 7.84741C4.37743 8.87524 4.26604 10.0062 4.48308 11.0974C4.70012 12.1885 5.23585 13.1908 6.02252 13.9775C6.80919 14.7641 7.81147 15.2999 8.90262 15.5169C9.99376 15.734 11.1248 15.6226 12.1526 15.1968C13.1804 14.7711 14.0589 14.0501 14.677 13.1251C15.2951 12.2001 15.625 11.1125 15.625 10H17.5Z" fill="currentColor"/></svg>');
+  -webkit-mask-size: cover;
+  mask-size: cover;
   animation: ${rotateAnimation} 800ms infinite linear;
   background-color: currentColor;
 `;