bodge to fix screenshots on mobile (smol screens)

.stylelintrc.json

@@ -1,3 +1,11 @@
 {
-    "extends": "stylelint-config-standard"
+    "extends": "stylelint-config-standard",
+    "rules": {
+        "selector-pseudo-class-no-unknown": [
+            true,
+            {
+                "ignorePseudoClasses": ["global"]
+            }
+        ]
+    }
 }

src/components/KinkCheck.module.css

@@ -21,8 +21,8 @@
 }
 
 @media screen and (width <= 800px) {
-    .category,
-    .table {
+    :global(body:not(.screenshot)) .category,
+    :global(body:not(.screenshot)) .table {
         width: 100%;
     }
 }

src/components/RatingOverview.astro

@@ -18,7 +18,7 @@ import Rater from "./Rater";
         font-size: 16pt;
     }
     @media screen and (width <= 800px) {
-        div {
+        :global(body:not(.screenshot)) div {
             justify-content: space-between;
         }
     }

src/components/ScreenshotButton.tsx

@@ -8,6 +8,7 @@ export default function ScreenshotButton({ title, options = {} }: { title: strin
             <a onClick={async () => {
                 // TODO: be able to pass in a selector for what to screenshot
                 const content = document.querySelector("div#content") as HTMLElement;
+                document.body.classList.add("screenshot");
                 content.style.width = options.windowWidth + "px";
                 const canvas = await html2canvas(content, {
                     backgroundColor: "black",
@@ -16,6 +17,7 @@ export default function ScreenshotButton({ title, options = {} }: { title: strin
                     scale: window.orientation !== undefined ? 1 : 2,
                     ...options
                 });
+                document.body.classList.remove("screenshot");
                 content.style.width = "";
 
                 const date = new Date().toISOString()