fix: alert size on login screen mobile

rotki · Aug 22, 2023 · b94e9c3 · b94e9c3
1 parent 93168ec
commit b94e9c3
Show file tree

Hide file tree

Showing 8 changed files with 16 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"