feat(nc-gui): add min heights to prevent title from jumping

packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue

@@ -31,7 +31,7 @@ const onClick = () => {
 
 <template>
   <div
-    class="overflow-y-auto overflow-x-hidden flex flex-wrap color-transition nc-form-view relative md:bg-primary bg-opacity-10 dark:(bg-slate-900) h-full min-h-[600px] pt-12"
+    class="overflow-y-auto overflow-x-hidden flex flex-wrap color-transition nc-form-view relative md:bg-primary bg-opacity-10 dark:(bg-slate-900) h-full min-h-[600px]"
   >
     <NuxtPage />
 

packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue

@@ -21,7 +21,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
 
 <template>
   <div
-    class="color-transition bg-white dark:bg-slate-700 relative flex flex-col justify-center gap-2 w-full max-w-[max(33%,600px)] m-auto py-4 pb-8 px-16 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
+    class="color-transition bg-white dark:bg-slate-700 relative flex flex-col justify-center gap-2 w-full max-w-[max(33%,600px)] m-auto py-4 pb-8 px-16 md:(rounded-lg border-1 border-gray-200 shadow-xl) mt-12"
   >
     <template v-if="sharedFormView">
       <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>

packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue

@@ -105,17 +105,18 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
 </script>
 
 <template>
-  <div class="w-full flex flex-auto flex-col justify-center items-center">
+  <div class="w-full min-h-2/3 flex flex-auto flex-col justify-center items-center">
     <template v-if="sharedFormView">
-      <div class="flex-1" />
-
+      <div class="min-h-1 h-1/3 w-full flex flex-col justify-end">
         <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
 
         <h2 class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4">
           {{ sharedFormView.subheading }}
         </h2>
+      </div>
     </template>
 
+    <div class="h-1/2 w-full">
       <Transition :name="`slide-${transitionName}`" mode="out-in">
         <div
           ref="el"
@@ -169,7 +170,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
           <div v-if="(!isFirst || !isLast) && !submitted" class="flex w-full text-lg mt-2">
             <a-tooltip v-if="!isFirst" title="Go to previous" :mouse-enter-delay="1" :mouse-leave-delay="0">
               <button
-              class="group color-transition transform hover:scale-110 absolute left-5 top-1/2 md:static"
+                class="group color-transition transform hover:scale-110 absolute left-1 top-1/2 md:static"
                 @click="goPrevious"
               >
                 <MdiChevronLeft class="group-hover:text-accent text-2xl md:text-md" />
@@ -191,7 +192,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
               :mouse-enter-delay="v$.localState[field.title]?.$error ? 0 : 1"
               :mouse-leave-delay="0"
             >
-            <button class="group color-transition transform absolute right-5 top-1/2 md:static hover:scale-110" @click="goNext">
+              <button class="group color-transition transform absolute right-1 top-1/2 md:static hover:scale-110" @click="goNext">
                 <TransitionGroup name="layout">
                   <MdiCloseCircleOutline v-if="v$.localState[field.title]?.$error" class="text-red-500 text-2xl md:text-md" />
                   <MdiChevronRight v-else class="group-hover:text-accent text-2xl md:text-md" />
@@ -224,8 +225,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
           </Transition>
         </div>
       </Transition>
-
-    <div v-if="sharedFormView" class="flex-1" />
+    </div>
 
     <div class="absolute bottom-12 right-12 flex flex-col">
       <div>{{ index + 1 }} / {{ formColumns?.length }}</div>