From 7fade338ea0d74a8b385db2005946e04cbaddca7 Mon Sep 17 00:00:00 2001
From: nicfreeman1209 <nicfreeman1209@gmail.com>
Date: Sun, 7 Mar 2021 21:55:14 +0000
Subject: [PATCH] fix scrolling to top when tall modal is maximized

---
 src/components/modals/Modal.vue            | 14 +++++++++++---
 src/components/modals/NightOrderModal.vue  |  2 +-
 src/components/modals/ReferenceModal.vue   |  2 +-
 src/components/modals/VoteHistoryModal.vue |  2 +-
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/modals/Modal.vue b/src/components/modals/Modal.vue
index fb4f635..3a6d932 100644
--- a/src/components/modals/Modal.vue
+++ b/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,
diff --git a/src/components/modals/NightOrderModal.vue b/src/components/modals/NightOrderModal.vue
index a572cfa..de7a879 100644
--- a/src/components/modals/NightOrderModal.vue
+++ b/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;
diff --git a/src/components/modals/ReferenceModal.vue b/src/components/modals/ReferenceModal.vue
index 393dd42..9ddbc7b 100644
--- a/src/components/modals/ReferenceModal.vue
+++ b/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;
diff --git a/src/components/modals/VoteHistoryModal.vue b/src/components/modals/VoteHistoryModal.vue
index bf6331a..95eeaa8 100644
--- a/src/components/modals/VoteHistoryModal.vue
+++ b/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;