Fix shop tabs overflow off screen at certain zoom levels

Fix quest cards get cut off on small screens
Fix pop-up windows extend past screen edges on mobile

test/api/unit/middlewares/blocker.test.js

@@ -117,6 +117,15 @@ describe('Blocker middleware', () => {
 
       checkIPBlockedErrorThrown(next);
     });
+
+    it('throws when the ip is blocked', () => {
+      req.ip = '192.168.1.1';
+      sandbox.stub(nconf, 'get').withArgs('BLOCKED_IPS').returns('192.168.1.1');
+      const attachBlocker = requireAgain(pathToBlocker).default;
+      attachBlocker(req, res, next);
+
+      checkIPBlockedErrorThrown(next);
+    });
   });
 
   describe('Blocking clients', () => {

website/client/src/components/groups/questDetailModal.vue

@@ -218,13 +218,19 @@
     flex-direction: row;
     flex-wrap: wrap;
     gap: 0.5rem;
-
-    // somehow the browser felt like setting this 398px instead
-    // now its fixed to 400 :)
-    width: 400px;
-
+    max-width: 400px;
+    width: 100%;
     margin-bottom: 1.5rem;
 
+    @media (max-width: 589px) {
+      max-width: 100%;
+      justify-content: center;
+    }
+
+    @media (max-width: 353px) {
+      gap: 0.25rem;
+    }
+
     .quest-col {
       ::v-deep {
         .item-wrapper {
@@ -251,6 +257,28 @@
     ::v-deep & {
       .modal-dialog {
         width: 448px !important;
+        max-width: calc(100vw - 20px);
+        margin: 0.5rem auto;
+        display: flex;
+
+        @media (max-width: 468px) {
+          width: 100% !important;
+        }
+
+        @media (max-width: 353px) {
+          width: 100% !important;
+          margin: 0.25rem auto;
+        }
+      }
+
+      .modal-content {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+
+        @media (max-width: 300px) {
+          border-radius: 0;
+        }
       }
     }
 

website/client/src/components/secondaryMenu.vue

@@ -12,6 +12,12 @@
   box-shadow: 0 1px 2px 0 rgba($black, 0.2);
   z-index: 9;
   height: 3rem;
+  flex-wrap: wrap;
+
+  @media (max-width: 683px) {
+    height: auto;
+    min-height: 3rem;
+  }
 }
 
 .nav-link {
@@ -23,6 +29,19 @@
   padding: 0.75rem;
 
   color: $gray-50;
+  white-space: nowrap;
+
+  @media (max-width: 683px) {
+    padding: 0.5rem;
+    font-size: 13px;
+    flex: 1 1 auto;
+    min-width: fit-content;
+  }
+
+  @media (max-width: 576px) {
+    padding: 0.5rem 0.4rem;
+    font-size: 12px;
+  }
 
   &.active {
     color: $purple-300;

website/client/src/components/shops/buyModal.vue

@@ -269,7 +269,13 @@
 
     .modal-dialog {
       width: 448px;
+      max-width: calc(100vw - 20px);
       box-sizing: border-box;
+      display: flex;
+
+      @media (max-width: 468px) {
+        width: 100%;
+      }
     }
 
     .badge-dialog {
@@ -346,7 +352,23 @@
 
     .content {
       text-align: center;
-      width: 448px;
+      width: 100%;
+      max-width: 448px;
+      margin: 0 auto;
+
+      @media (max-width: 468px) {
+        max-width: 100%;
+      }
+    }
+
+    .modal-content {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+
+      @media (max-width: 300px) {
+        border-radius: 0;
+      }
     }
 
     .item-wrapper {

website/client/src/components/shops/market/sellModal.vue

@@ -111,6 +111,22 @@
 
     .modal-dialog {
       width: 448px;
+      max-width: calc(100vw - 20px);
+      display: flex;
+
+      @media (max-width: 468px) {
+        width: 100%;
+      }
+    }
+
+    .modal-content {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+
+      @media (max-width: 300px) {
+        border-radius: 0;
+      }
     }
 
     .modal-body {

website/client/src/components/shops/quests/buyQuestModal.vue

@@ -165,6 +165,28 @@
     .modal-dialog {
       margin-top: 8%;
       width: 448px !important;
+      max-width: calc(100vw - 20px);
+      display: flex;
+
+      @media (max-width: 468px) {
+        width: 100% !important;
+        margin: 0.5rem auto;
+        margin-top: 2%;
+      }
+
+      @media (max-width: 353px) {
+        margin: 0.25rem auto;
+      }
+    }
+
+    .modal-content {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+
+      @media (max-width: 300px) {
+        border-radius: 0;
+      }
     }
 
     .content {

website/server/controllers/api-v4/admin.js

@@ -187,5 +187,4 @@ api.deleteBlocker = {
     res.respond(200, savedBlocker);
   },
 };
-
 export default api;

website/server/middlewares/blocker.js

@@ -1,3 +1,4 @@
+import nconf from 'nconf';
 import {
   Forbidden,
 } from '../libs/errors';
@@ -9,7 +10,19 @@ import { model as Blocker } from '../models/blocker';
 // NOTE: it's meant to be used behind a proxy (for example a load balancer)
 // that uses the 'x-forwarded-for' header to forward the original IP addresses.
 
-const blockedIps = [];
+// A list of comma separated IPs to block
+// It works fine as long as the list is short,
+// if the list becomes too long for an env variable we'll switch to Redis.
+const BLOCKED_IPS_RAW = nconf.get('BLOCKED_IPS');
+
+const blockedIps = BLOCKED_IPS_RAW
+  ? BLOCKED_IPS_RAW
+    .trim()
+    .split(',')
+    .map(blockedIp => blockedIp.trim())
+    .filter(blockedIp => Boolean(blockedIp))
+  : [];
+
 const blockedClients = [];
 
 Blocker.watchBlockers({