From b94e9c37816db60109159fb9a7128a3c9eef49c3 Mon Sep 17 00:00:00 2001
From: lukicenturi <lukicenturi@gmail.com>
Date: Tue, 22 Aug 2023 14:38:52 +0700
Subject: [PATCH] fix: alert size on login screen mobile

---
 components/account/activation/AccountActivate.vue   | 2 +-
 components/account/activation/PendingActivation.vue | 2 +-
 components/account/login/LoginForm.vue              | 8 ++++++--
 components/account/password/PasswordChanged.vue     | 2 +-
 components/account/password/PasswordForm.vue        | 2 +-
 components/account/password/PasswordLinkSend.vue    | 2 +-
 components/account/password/PasswordReset.vue       | 2 +-
 components/account/signup/SignupForm.vue            | 5 ++++-
 8 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/components/account/activation/AccountActivate.vue b/components/account/activation/AccountActivate.vue
index a97b17e8..37491089 100644
--- a/components/account/activation/AccountActivate.vue
+++ b/components/account/activation/AccountActivate.vue
@@ -29,7 +29,7 @@ const { t } = useI18n();
   <div
     class="container py-16 lg:pt-[200px] lg:pb-32 flex flex-col items-center justify-center"
   >
-    <div class="w-[380px]">
+    <div class="w-[380px] max-w-full">
       <div v-if="validating" class="flex justify-center">
         <RuiProgress variant="indeterminate" circular color="primary" />
       </div>
diff --git a/components/account/activation/PendingActivation.vue b/components/account/activation/PendingActivation.vue
index cb957732..a49003d5 100644
--- a/components/account/activation/PendingActivation.vue
+++ b/components/account/activation/PendingActivation.vue
@@ -6,7 +6,7 @@ const { t } = useI18n();
   <div
     class="container h-full flex flex-col pt-10 md:pt-0 md:flex-1 md:items-center md:justify-center"
   >
-    <div class="max-w-[30.6rem] space-y-3">
+    <div class="max-w-[30.6rem] max-w-full space-y-3">
       <div class="text-h4">{{ t('auth.pending_activation.title') }}</div>
       <div class="text-body-1 text-rui-text-secondary">
         {{ t('auth.pending_activation.message') }}
diff --git a/components/account/login/LoginForm.vue b/components/account/login/LoginForm.vue
index d35bc61a..b87000bf 100644
--- a/components/account/login/LoginForm.vue
+++ b/components/account/login/LoginForm.vue
@@ -61,7 +61,7 @@ const { t } = useI18n();
 </script>
 
 <template>
-  <div class="w-[360px] space-y-8">
+  <div class="w-[360px] max-w-full space-y-8">
     <div class="space-y-3">
       <div class="text-h4">{{ t('auth.login.title') }}</div>
       <div class="text-body-1 text-rui-text-secondary">
@@ -128,7 +128,11 @@ const { t } = useI18n();
       </ButtonLink>
     </div>
   </div>
-  <div v-if="hadError" :class="modal ? 'w-[360px] mt-8' : 'w-[660px] mt-14'">
+  <div
+    v-if="hadError"
+    class="max-w-full"
+    :class="modal ? 'w-[360px] mt-8' : 'w-[660px] mt-14'"
+  >
     <RuiAlert type="error" :description="t('auth.login.alert_error')" />
   </div>
 </template>
diff --git a/components/account/password/PasswordChanged.vue b/components/account/password/PasswordChanged.vue
index c4d67df3..34b1df1e 100644
--- a/components/account/password/PasswordChanged.vue
+++ b/components/account/password/PasswordChanged.vue
@@ -6,7 +6,7 @@ const { t } = useI18n();
   <div
     class="container py-16 lg:pt-[250px] lg:pb-32 flex flex-col items-center justify-center"
   >
-    <div class="w-[360px] space-y-8">
+    <div class="w-[360px] max-w-full space-y-8">
       <div class="space-y-3">
         <div class="text-h4">{{ t('auth.password_changed.title') }}</div>
         <div class="text-body-1 text-rui-text-secondary">
diff --git a/components/account/password/PasswordForm.vue b/components/account/password/PasswordForm.vue
index 29210ce4..15e9d3ce 100644
--- a/components/account/password/PasswordForm.vue
+++ b/components/account/password/PasswordForm.vue
@@ -68,7 +68,7 @@ const { t } = useI18n();
   <div
     class="container py-16 lg:pt-[200px] lg:pb-32 flex flex-col items-center justify-center"
   >
-    <div class="w-[360px] space-y-8">
+    <div class="w-[360px] max-w-full space-y-8">
       <div class="text-h4">{{ t('auth.recover_password.title') }}</div>
 
       <form class="space-y-6" @submit.prevent="">
diff --git a/components/account/password/PasswordLinkSend.vue b/components/account/password/PasswordLinkSend.vue
index 6aeef513..6bc9e06b 100644
--- a/components/account/password/PasswordLinkSend.vue
+++ b/components/account/password/PasswordLinkSend.vue
@@ -6,7 +6,7 @@ const { t } = useI18n();
   <div
     class="container py-16 lg:pt-[250px] lg:pb-32 flex flex-col items-center justify-center"
   >
-    <div class="w-[360px] space-y-3">
+    <div class="w-[360px] max-w-full space-y-3">
       <div class="text-h4">{{ t('auth.password_link_send.title') }}</div>
       <div class="text-body-1 text-rui-text-secondary">
         {{ t('auth.password_link_send.message') }}
diff --git a/components/account/password/PasswordReset.vue b/components/account/password/PasswordReset.vue
index 0632287a..57bd6938 100644
--- a/components/account/password/PasswordReset.vue
+++ b/components/account/password/PasswordReset.vue
@@ -116,7 +116,7 @@ const { t } = useI18n();
   <div
     class="container py-16 lg:pt-[200px] lg:pb-32 flex flex-col items-center justify-center"
   >
-    <div class="w-[360px]">
+    <div class="w-[360px] max-w-full">
       <div v-if="validating" class="flex justify-center">
         <RuiProgress variant="indeterminate" circular color="primary" />
       </div>
diff --git a/components/account/signup/SignupForm.vue b/components/account/signup/SignupForm.vue
index b360047b..d480c2ff 100644
--- a/components/account/signup/SignupForm.vue
+++ b/components/account/signup/SignupForm.vue
@@ -140,7 +140,10 @@ const setErrors = (errors: ValidationErrors) => {
     class="container flex flex-col lg:flex-row pt-4 pb-8 lg:py-14 h-full grow"
   >
     <div class="flex justify-center grow">
-      <form class="w-[440px] flex flex-col justify-between" @submit.prevent="">
+      <form
+        class="w-[440px] max-w-full flex flex-col justify-between"
+        @submit.prevent=""
+      >
         <SignupIntroduction v-if="step === 1" @next="next()" />
         <SignupAccount
           v-if="step === 2"