fix: box responsive

Author: alexiscolin

src/components/faucet/FaucetDetail.vue

@@ -3,9 +3,9 @@
 
   <section
     ref="DOMpopup"
-    class="popup fixed flex flex-col items-center rounded w-[90vw] max-w-[36rem] bg-grey-300 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[1000] justify-center text-grey-50 before:absolute before:top-0 before:bottom-0 before:left-0 before:right-0 before:rounded before:bg-500 before:z-min after:absolute after:top-px after:left-px after:bottom-px after:right-px after:bg-grey-500 after:rounded after:z-min"
+    class="popup fixed flex flex-col items-center rounded w-[90vw] max-w-[36rem] max-h-[90vh] justify-start bg-grey-300 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[1000] md:justify-center text-grey-50 before:absolute before:top-0 before:bottom-0 before:left-0 before:right-0 before:rounded before:bg-500 before:z-min after:absolute after:top-px after:left-px after:bottom-px after:right-px after:bg-grey-500 after:rounded after:z-min"
   >
-    <div ref="DOMFaucetRequest" class="py-12 px-20 w-full" v-if="store.isVisible">
+    <div ref="DOMFaucetRequest" class="py-8 md:py-12 px-8 md:px-20 w-full overflow-scroll" v-if="store.isVisible">
       <FaucetContentForm :name="store.selectedFaucet.name ?? 'Faucet'" :options="store.faucetAmount" v-show="store.contentStep === 0" class="js-faucetform opacity-100" :error="error" @requestFaucet="requestFaucet" />
       <div>
         <div ref="gnoRequestLogo" v-show="store.contentStep >= 1" class="opacity-0">

src/components/faucet/content/FaucetContentForm.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
-    <h2 class="text-600 mb-12">{{ name }}</h2>
-    <form class="w-full space-y-12" @submit.prevent="requestFaucet">
+    <h2 class="text-500 md:text-600 mb-8 md:mb-12">{{ name }}</h2>
+    <form class="w-full space-y-7 md:space-y-12" @submit.prevent="requestFaucet">
       <Input :label="'Enter your wallet address'" :placeholder="'e.g. g1juwee0ynsdvaukvxk3j5s4cl6nn24uxwlydxrl'" v-model="bindAddress" required />
       <Select v-if="store.selectedFaucet.amounts" :label="'Select faucet amount'" :options="options" @update="(option) => SelectAmount(option)" />
       <Recaptcha @validation="captchaValidation" :captchakey="store.selectedFaucet.recaptcha" />
       <div>
-        <div class="flex gap-4">
+        <div class="flex flex-col md:flex-row gap-4">
           <Button text="Cancel" variant="outline" @click.prevent="() => closePopup()" class="w-full" />
           <Button text="Request drip" class="w-full" type="submit" :disabled="captchaValid === false || bindAddress === ''" />
         </div>

src/components/ui/Recaptcha.vue

@@ -1,9 +1,10 @@
 <template>
-  <vue-recaptcha theme="dark" :sitekey="captchakey" @verify="handleSuccess" @error="handleError"></vue-recaptcha>
+  <vue-recaptcha theme="dark" :size="screenWidth < 768 ? 'compact' : 'normal'" :sitekey="captchakey" @verify="handleSuccess" @error="handleError"></vue-recaptcha>
 </template>
 
 <script setup lang="ts">
 import { onMounted } from 'vue'
+import { useWindowSize } from '@vueuse/core'
 
 type Props = {
   captchakey: string
@@ -12,6 +13,8 @@ defineProps<Props>()
 
 const emit = defineEmits(['validation'])
 
+const { width: screenWidth } = useWindowSize()
+
 const handleError = (res: string) => {
   emit('validation', { code: 'error', secret: res ?? 'error' })
 }

src/stores/faucetDetail.ts

@@ -71,7 +71,7 @@ export const useFaucetDetail = defineStore('faucetDetail', {
 
       gsap.to(this.DOM.bg, { autoAlpha: this.isOpen ? 1 : 0, duration: 1, delay: this.isOpen ? 0 : 0.4 })
       gsap.to(this.DOM.popup, {
-        top: this.isOpen ? '55%' : '50%',
+        top: this.isOpen ? '50%' : '45%',
         autoAlpha: this.isOpen ? 1 : 0,
         'clip-path': this.isOpen ? 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)' : 'polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)',
         duration: 0.6,