Modal width responsiveness (partial fix for #10267) (#10354)

* added responsive scss to allow modals to respond to changing window size

* Remove unecessary space

* moved scss around

* remove unnecessary space

* Adjust left and right panels to be more responsive + moved css for buyQuestModal into its respective vue file (startQuestModal css wasn't working in its vue file... I can't figure out why)

* removed important to get rid of extra scrollbar

* moved css all to one file

website/client/app.vue

@@ -106,7 +106,7 @@ div
 
   /* @TODO: The modal-open class is not being removed. Let's try this for now */
   .modal, .modal-open {
-    overflow-y: scroll !important;
+    overflow-y: scroll;
   }
 
   .modal-backdrop.show {

website/client/assets/scss/modal.scss

@@ -35,5 +35,86 @@
     overflow-y: hidden;
     text-overflow: ellipsis;
   }
-
+}
+
+#start-quest-modal, #buy-quest-modal {
+  @media only screen and (max-width: 1200px) {
+    .modal-dialog {
+      max-width: 33%;
+
+      .left-panel {
+        left: initial;
+        width: 100%;
+        right: 100%;
+
+        .col-4 {
+          width: 100px;
+        }
+      }
+
+      .side-panel, .right-sidebar {
+        left: calc(100% - 10px);
+        max-width: 100%;
+        right: initial;
+
+        .questRewards {
+          width: 90%;
+
+          .reward-item {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+
+  @media only screen and (max-width: 1000px) {
+    .modal-dialog {
+      max-width: 80%;
+      width: 80% !important;
+
+      .modal-body {
+        flex-direction: column;
+        display: flex;
+
+        div:nth-child(1) { order: 3; }
+        div:nth-child(2) { order: 1; }
+        div:nth-child(3) { order: 4; }
+        div:nth-child(4) { order: 5; }
+        div:nth-child(5) { order: 2; }
+
+        .left-panel {
+          border-radius: 8px;
+          position: static;
+          right: initial;
+          margin: 20px 0;
+          height: auto;
+          width: 100%;
+          z-index: 0;
+          order: 3;
+
+          .col-4 {
+            max-width: 100px;
+          }
+        }
+
+        .side-panel, .right-sidebar {
+          margin: 20px 0 0 0;
+          position: static;
+          box-shadow: none;
+          height: auto;
+          width: 100%;
+          z-index: 0;
+          order: 2;
+          left: 0;
+
+          .questRewards {
+            padding: 0 2em 2em 2em;
+            width: 100%;
+            z-index: 0;
+          }
+        }
+      }
+    }
+  }
 }

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

@@ -62,7 +62,6 @@
 
     .content {
       text-align: center;
-      overflow-y: scroll;
     }
 
     .item-wrapper {
@@ -71,14 +70,12 @@
 
     .inner-content {
       margin: 33px auto auto;
-      width: 400px;
     }
 
 
     .questInfo {
       width: 70%;
-      margin: 0 auto;
-      margin-bottom: 10px;
+      margin: 0 auto 10px auto;
     }
 
     .right-sidebar {
@@ -99,9 +96,7 @@
     span.svg-icon.inline.icon-32 {
       height: 32px;
       width: 32px;
-
       margin-right: 8px;
-
       vertical-align: middle;
     }
 
@@ -112,7 +107,6 @@
       font-size: 24px;
       font-weight: bold;
       line-height: 1.33;
-
       vertical-align: middle;
 
       &.gems {
@@ -161,7 +155,6 @@
       }
     }
 
-
     .notEnough {
       pointer-events: none;
       opacity: 0.55;