From f476cfe2bfff4a8bb3c136e294c7c45943172f08 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Fri, 25 Nov 2022 15:39:30 +0800
Subject: [PATCH] fix: intro dialog on mobile device

closes #77
---
 components/help/HelpPreview.vue  | 2 +-
 components/modal/ModalDialog.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/help/HelpPreview.vue b/components/help/HelpPreview.vue
index 17d0ba67..71bf9c11 100644
--- a/components/help/HelpPreview.vue
+++ b/components/help/HelpPreview.vue
@@ -51,7 +51,7 @@ const teams: Team[] = [
     <p>
       Before that, to help boosting out development, you can sponsor our team members with the links below.
     </p>
-    <p flex="~ gap-2" mxa>
+    <p flex="~ gap-2 wrap" mxa>
       <template v-for="team of teams" :key="team.github">
         <a :href="`https://github.com/sponsors/${team.github}`" target="_blank">
           <img :src="`https://github.com/${team.github}.png`" :alt="team.display" rounded-full w-15 h-15>
diff --git a/components/modal/ModalDialog.vue b/components/modal/ModalDialog.vue
index b8b80a67..0876ca18 100644
--- a/components/modal/ModalDialog.vue
+++ b/components/modal/ModalDialog.vue
@@ -24,7 +24,7 @@ watchOnce(modelValue, () => {
     <div
       class="
         bg-base absolute transition-all duration-200 ease-out shadow rounded-md transform
-        border border-base left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2
+        border border-base top-1/2 -translate-y-1/2 mx-8 md:(left-1/2 -translate-x-1/2)
       "
       :class="modelValue ? 'opacity-100' : 'opacity-0'"
     >