fix scrolling to top when tall modal is maximized

src/components/modals/Modal.vue

@@ -21,7 +21,9 @@
             icon="times-circle"
           />
         </div>
-        <slot></slot>
+        <div class="slot">
+          <slot></slot>
+        </div>
       </div>
     </div>
   </transition>
@@ -83,10 +85,11 @@ export default {
     justify-content: center;
     line-height: 100%;
   }
+
   > .top-right-buttons {
     position: absolute;
     z-index: 100;
-    top: 20px;
+    top: 15px;
     right: 20px;
     > .top-right-button {
       cursor: pointer;
@@ -96,6 +99,11 @@ export default {
       }
     }
   }
+
+  > .slot {
+    max-height: 100%;
+    position: initial;
+  }
 }
 
 .maximized {
@@ -107,7 +115,7 @@ export default {
   max-height: 100%;
   display: flex;
   align-content: center;
-  justify-content: safe center;
+  justify-content: center;
 }
 
 .modal-fade-enter,

src/components/modals/NightOrderModal.vue

@@ -157,7 +157,7 @@ export default {
 .toggle {
   position: absolute;
   left: 20px;
-  top: 20px;
+  top: 15px;
   cursor: pointer;
   &:hover {
     color: red;

src/components/modals/ReferenceModal.vue

@@ -95,7 +95,7 @@ export default {
 .toggle {
   position: absolute;
   left: 20px;
-  top: 20px;
+  top: 15px;
   cursor: pointer;
   &:hover {
     color: red;

src/components/modals/VoteHistoryModal.vue

@@ -91,7 +91,7 @@ export default {
 .clear {
   position: absolute;
   left: 20px;
-  top: 20px;
+  top: 15px;
   cursor: pointer;
   &:hover {
     color: red;