chore: improved card positioning

src/components/Global/Card.vue

@@ -2,10 +2,9 @@
   <transition name="modal-anim" tag="div">
     <div class="card" v-if="isOpen">
       <div class="card-background" @click="toggleCard(false)"></div>
-      <div class="card-body" ref="wrapper" tabindex="0">
+      <div class="card-body" tabindex="0">
         <slot></slot>
       </div>
-      <div class="tab-exit" ref="exit" tabindex="0" @focus="toggleCard(false)"></div>
     </div>
   </transition>
 </template>
@@ -52,8 +51,12 @@ export default defineComponent({
   left: 0;
 
   width: 100%;
-  height: 100vh;
+  height: 100%;
   z-index: 200;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .card-background {
@@ -69,20 +72,16 @@ export default defineComponent({
 }
 
 .card-body {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 210;
-  overflow: auto;
+  position: relative;
+
+  margin: 1em;
+
+  background-color: #1a1a1a;
+  box-shadow: 0 0 15px 10px #0e0e0e;
+
   max-height: 95vh;
   max-height: 95dvh;
 
-  box-shadow: 0 0 15px 10px #0e0e0e;
-
-  & > :slotted(div) {
-    background-color: #1a1a1a;
-    width: 95vw;
-  }
+  overflow: auto;
 }
 </style>