Merge pull request #2718 from nocodb/fix/signup-overflow

fix(gui-v2): overflow container on signin/signup forms

packages/nc-gui-v2/assets/style-v2.css

@@ -2,7 +2,18 @@ html,
 body,
 #__nuxt,
 .v-application__wrap {
-    @apply m-0 h-[100vh] w-[100vw] bg-white dark:(bg-black text-white);
+    @apply m-0 h-full w-full bg-white dark:(bg-black text-white);
+}
+
+.v-main {
+    @apply w-full h-full;
+    overflow: hidden;
+    flex: unset !important;
+}
+
+.v-main .v-main__wrap {
+    @apply flex-0 w-full relative scrollbar-thin-primary;
+    overflow-x: hidden;
 }
 
 nav,

packages/nc-gui-v2/pages/projects/index.vue

@@ -130,16 +130,3 @@ const activePage = $ref(navDrawerOptions[0].title)
     </v-container>
   </NuxtLayout>
 </template>
-
-<style scoped>
-.v-main {
-  @apply w-full;
-  overflow: hidden;
-  flex: unset !important;
-}
-
-:deep(.v-main__wrap) {
-  @apply flex-0 w-full relative scrollbar-thin-primary;
-  overflow-x: hidden;
-}
-</style>

packages/nc-gui-v2/pages/signin.vue

@@ -120,13 +120,13 @@ const resetError = () => {
             @focus="resetError"
           />
 
-          <div class="self-end">
+          <div class="hidden md:block self-end mx-8">
             <nuxt-link class="prose-sm text-primary underline hover:opacity-75" to="/forgot-password">
               {{ $t('msg.info.signUp.forgotPassword') }}
             </nuxt-link>
           </div>
 
-          <div class="self-center flex items-center justify-between w-100">
+          <div class="self-center flex flex-wrap gap-4 items-center mt-4 md:mx-8 md:justify-between justify-center w-full">
             <button
               :disabled="!valid"
               :class="[
@@ -143,6 +143,12 @@ const resetError = () => {
               {{ $t('msg.info.signUp.dontHaveAccount') }}
               <nuxt-link class="text-primary underline hover:opacity-75" to="/signup">{{ $t('general.signUp') }}</nuxt-link>
             </div>
+
+            <div class="prose-sm md:hidden">
+              <nuxt-link class="prose-sm text-primary underline hover:opacity-75" to="/forgot-password">
+                {{ $t('msg.info.signUp.forgotPassword') }}
+              </nuxt-link>
+            </div>
           </div>
         </div>
       </div>

packages/nc-gui-v2/pages/signup.vue

@@ -64,7 +64,7 @@ const resetError = () => {
     <v-form
       ref="formValidator"
       v-model="valid"
-      class="h-full min-h-[600px] flex justify-center items-center"
+      class="h-[calc(100%_+_90px)] min-h-[600px] flex justify-center items-center"
       @submit.prevent="signUp"
     >
       <div class="h-full w-full flex flex-col flex-wrap justify-center items-center">
@@ -112,7 +112,7 @@ const resetError = () => {
 
           <v-text-field
             id="password_repeat"
-            v-model="form.password"
+            v-model="form.passwordRepeat"
             class="bg-white dark:!bg-gray-900"
             :rules="formRules.passwordRepeat"
             :label="`Repeat ${$t('labels.password')}`"