move modal css into the correct place

src/App.scss

@@ -714,22 +714,6 @@ nav {
   }
 }
 
-.modal-view {
-  z-index: 1000;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow: auto;
-  animation-duration: 0.2s;
-  background-color: rgba(0, 0, 0, 0.5);
-  animation-name: modal-background-fadein;
-}
-
 .button-icon {
   font-size: 1.2em;
 }

src/components/modal/modal.vue

@@ -21,6 +21,20 @@ export default {
 <style lang="scss">
 
 .modal-view {
+  z-index: 1000;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: auto;
+  animation-duration: 0.2s;
+  background-color: rgba(0, 0, 0, 0.5);
+  animation-name: modal-background-fadein;
+
   body:not(.scroll-locked) & {
     display: none;
   }