From a35dffdd3ce2d34afe4c1accc3e04dc46ab05c25 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 18 Jul 2022 11:57:23 +0200
Subject: [PATCH] fix(gui-v2): overflow container on signin/signup forms

# What's changed?

* increase signup form size by logo height so we can properly scroll the form
---
 packages/nc-gui-v2/assets/style-v2.css      | 13 ++++++++++++-
 packages/nc-gui-v2/pages/projects/index.vue | 13 -------------
 packages/nc-gui-v2/pages/signin.vue         | 10 ++++++++--
 packages/nc-gui-v2/pages/signup.vue         |  4 ++--
 4 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/packages/nc-gui-v2/assets/style-v2.css b/packages/nc-gui-v2/assets/style-v2.css
index 473ab73867..1419c81fdf 100644
--- a/packages/nc-gui-v2/assets/style-v2.css
+++ b/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,
diff --git a/packages/nc-gui-v2/pages/projects/index.vue b/packages/nc-gui-v2/pages/projects/index.vue
index ad326842b3..4bf292c360 100644
--- a/packages/nc-gui-v2/pages/projects/index.vue
+++ b/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>
diff --git a/packages/nc-gui-v2/pages/signin.vue b/packages/nc-gui-v2/pages/signin.vue
index d54f8ad181..69980178ab 100644
--- a/packages/nc-gui-v2/pages/signin.vue
+++ b/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>
diff --git a/packages/nc-gui-v2/pages/signup.vue b/packages/nc-gui-v2/pages/signup.vue
index 81b3fcd011..163a36246b 100644
--- a/packages/nc-gui-v2/pages/signup.vue
+++ b/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')}`"