From 5636a910285db9afc94531aa01fadbceb50ee02c Mon Sep 17 00:00:00 2001
From: wearrrrr <contact@wearr.dev>
Date: Fri, 23 Feb 2024 13:56:21 -0600
Subject: [PATCH] Mobile responsive settings, and fix bug with index.js

---
 index.js                             |  6 ++-
 src/components/SettingsTablist.astro | 59 ++++++++++++++++++++++------
 2 files changed, 51 insertions(+), 14 deletions(-)

diff --git a/index.js b/index.js
index 2118c02..bf253f7 100644
--- a/index.js
+++ b/index.js
@@ -49,8 +49,10 @@ app.use(
   })
 );
 app.use(function(req, res, next) {
-  res.header("Cross-Origin-Embedder-Policy", "require-corp");
-  res.header("Cross-Origin-Opener-Policy", "same-origin");
+  if (req.originalUrl.includes("/games")) {
+    res.header("Cross-Origin-Embedder-Policy", "require-corp");
+    res.header("Cross-Origin-Opener-Policy", "same-origin");
+  }
   next();
 });
 app.use("/", express.static("dist/client/"));
diff --git a/src/components/SettingsTablist.astro b/src/components/SettingsTablist.astro
index fe72117..2e89718 100644
--- a/src/components/SettingsTablist.astro
+++ b/src/components/SettingsTablist.astro
@@ -385,6 +385,7 @@ const t = useTranslations(lang);
     gap: 20px;
     position: relative;
     z-index: 2;
+    flex-wrap: wrap;
   }
   .content-setting-header {
     color: var(--text-color);
@@ -460,6 +461,38 @@ const t = useTranslations(lang);
     position: relative;
     gap: 25px;
   }
+  @media (max-width: 880px) {
+    .popup {
+      flex-direction: column;
+      min-height: 80%;
+      max-height: 80%;
+    }
+    .tabs {
+      flex-direction: row;
+      max-width: 100%;
+      max-height: 70px;
+      min-height: 70px;
+      gap: 0;
+      align-items: center;
+    }
+    label {
+      width: auto;
+      margin-left: 0;
+    }
+  }
+  @media (max-width: 500px) {
+    label {
+      font-size: 20px;
+    }
+  }
+  @media (max-width: 375px) {
+    label {
+      font-size: 18px;
+    }
+  }
+  .setting {
+    width: 140px
+  }
   .marker {
     position: absolute;
     width: 100%;
@@ -484,16 +517,18 @@ const t = useTranslations(lang);
     height: calc(50% - 72px);
     border-radius: 0 32px 0 0;
   }
-  #setting-tab-proxy:checked ~ .marker {
-    transform: translateY(0%);
+  @media (min-width: 880px) {
+    #setting-tab-proxy:checked ~ .marker {
+      transform: translateY(0%);
+    }
+    #setting-tab-customization:checked ~ .marker {
+      transform: translateY(13.5%);
+    }
+    #setting-tab-cloaking:checked ~ .marker {
+      transform: translateY(27%);
+    }
+    #setting-tab-credits:checked ~ .marker {
+      transform: translateY(41%);
+    }
   }
-  #setting-tab-customization:checked ~ .marker {
-    transform: translateY(13.5%);
-  }
-  #setting-tab-cloaking:checked ~ .marker {
-    transform: translateY(27%);
-  }
-  #setting-tab-credits:checked ~ .marker {
-    transform: translateY(41%);
-  }
-</style>
+</style>
\ No newline at end of file