feat: improve layout

components/utils/SupportPopUp.vue

@@ -1,29 +1,15 @@
 <template>
-  <div class="flex" @click.self.stop="toggleSupportPopUp">
-    <div class="px-2 m-auto md:px-0">
-      <ContentContainer
-        title="Support us!"
-        text="Looks like you're enjoying the App, do you mind supporting the project with a donation?
+  <ContentContainer
+    title="Support us!"
+    text="Looks like you're enjoying the App, do you mind supporting the project with a donation?
 
 Or even better, subscribe to unlock Premium features!"
-        :links="[
-          {
-            href: 'https://redirect.r34.app/donations',
-            text: 'Donation',
-          },
-          { href: '/premium', text: 'Subscription', isInternal: true },
-        ]"
-      />
-    </div>
-  </div>
+    :links="[
+      {
+        href: 'https://redirect.r34.app/donations',
+        text: 'Donation',
+      },
+      { href: '/premium', text: 'Subscription', isInternal: true },
+    ]"
+  />
 </template>
-
-<script>
-export default {
-  methods: {
-    toggleSupportPopUp() {
-      this.$emit('toggleSupportPopUp')
-    },
-  },
-}
-</script>

components/utils/SupportPopUpManager.vue

@@ -4,11 +4,28 @@
     https://v3.vuejs.org/guide/teleport.html
   -->
   <transition name="page">
-    <div v-if="isSupportPopUpActive" class="fixed z-40 w-full h-screen">
-      <SupportPopUp
-        class="h-full bg-black bg-opacity-75"
-        @toggleSupportPopUp="toggleSupportPopUp()"
-      />
+    <div
+      v-if="isActive"
+      class="fixed inset-0 z-40 overflow-y-auto"
+      aria-label="Support pop up"
+      role="dialog"
+      aria-modal="true"
+    >
+      <div class="flex items-center justify-center min-h-screen text-center">
+        <!-- Background overlay -->
+        <div
+          class="fixed inset-0 bg-black bg-opacity-75"
+          aria-hidden="true"
+          @click.self.stop="toggleSupportPopUp"
+        ></div>
+
+        <!-- Modal panel -->
+        <div
+          class="inline-block px-2 overflow-hidden text-left align-middle transform sm:my-8 sm:max-w-xl sm:w-full sm:p-6"
+        >
+          <SupportPopUp />
+        </div>
+      </div>
     </div>
   </transition>
 </template>