fix(nc-gui): survey form alignments and line height

packages/nc-gui/components/general/NocoIcon.vue

@@ -3,17 +3,16 @@ interface Props {
   width?: number
   height?: number
   animate?: boolean
-  dark?: boolean
 }
 
-const { width = 90, height = 90, animate = false, dark = false } = defineProps<Props>()
+const { width = 90, height = 90, animate = false } = defineProps<Props>()
 </script>
 
 <template>
   <div :style="{ left: `calc(50% - ${width / 2}px)`, top: `-${height / 2}px` }" class="absolute rounded-lg pt-1 pl-1 -ml-1">
     <div class="relative">
-      <img v-show="dark" :width="width" :height="height" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
-      <img v-show="!dark" :width="width" :height="height" alt="NocoDB" src="~/assets/img/icons/512x512.png" />
+      <img class="hidden dark:block" :width="width" :height="height" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
+      <img class="dark:hidden" :width="width" :height="height" alt="NocoDB" src="~/assets/img/icons/512x512.png" />
 
       <template v-if="animate">
         <div class="animated-bg-gradient opacity-100 rounded-full z-0 absolute bottom-1.45 right-1.45 h-4.5 w-4.5" />

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

@@ -38,14 +38,10 @@ router.afterEach((to) => shouldRedirect(to.name as string))
 
 <template>
   <div
-    class="overflow-y-auto overflow-x-hidden flex flex-wrap color-transition nc-form-view relative bg-primary bg-opacity-10 dark:(bg-slate-900) h-full min-h-[600px]"
+    class="scrollbar-thin-dull overflow-y-auto overflow-x-hidden flex flex-col color-transition nc-form-view relative bg-primary bg-opacity-10 dark:(bg-slate-900) h-full min-h-[600px]"
   >
     <NuxtPage />
 
-    <div class="flex w-full items-end mt-12">
-      <GeneralPoweredBy :dark="isDark" />
-    </div>
-
     <div
       class="color-transition flex items-center justify-center cursor-pointer absolute top-4 md:top-15 right-4 md:right-15 rounded-full p-2 bg-white dark:(bg-slate-600) shadow hover:(ring-1 ring-accent ring-opacity-100)"
       @click="onClick"

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

@@ -20,13 +20,14 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
 </script>
 
 <template>
+  <div>
     <div
       class="color-transition relative flex flex-col justify-center gap-2 w-full max-w-[max(33%,600px)] m-auto py-4 pb-8 px-16 md:(bg-white dark:bg-slate-700 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>
 
-      <h2 v-if="sharedFormView.subheading" class="prose-lg text-slate-500 dark:text-slate-300 self-center">
+        <h2 v-if="sharedFormView.subheading" class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4 leading-6">
           {{ sharedFormView.subheading }}
         </h2>
 
@@ -118,4 +119,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
         </template>
       </template>
     </div>
+
+    <GeneralPoweredBy />
+  </div>
 </template>

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

@@ -151,25 +151,30 @@ onMounted(() => {
 </script>
 
 <template>
-  <div ref="el" class="w-full grid">
-    <template v-if="sharedFormView">
-      <div class="max-h-33vh max-w-[max(33%,600px)] mx-auto">
-        <div class="h-33vh flex flex-col justify-end">
+  <div ref="el" class="pt-8 md:p-0 w-full h-full flex flex-col">
+    <div
+      v-if="sharedFormView"
+      style="height: max(40vh, 250px); min-height: 250px"
+      class="max-w-[max(33%,600px)] mx-auto flex flex-col justify-end"
+    >
+      <div class="px-4 md:px-0 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
+          v-if="sharedFormView.subheading && sharedFormView.subheading !== ''"
+          class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4 leading-6"
+        >
+          {{ sharedFormView?.subheading }}
         </h2>
       </div>
     </div>
-    </template>
 
     <div class="h-full w-full flex items-center px-4 md:px-0">
       <Transition :name="`slide-${transitionName}`" :duration="1000" mode="out-in">
         <div
           ref="el"
           :key="field.title"
-          class="color-transition h-full flex flex-col justify-center gap-4 w-full max-w-[max(33%,600px)] m-auto"
+          class="color-transition h-full flex flex-col mt-6 gap-4 w-full max-w-[max(33%,600px)] m-auto"
         >
           <div v-if="field && !submitted" class="flex flex-col gap-2">
             <div class="flex nc-form-column-label">
@@ -210,7 +215,7 @@ onMounted(() => {
                   {{ error.$message }}
                 </div>
 
-                <div class="block">
+                <div class="block text-[14px]">
                   {{ field.description }}
                 </div>
               </div>
@@ -255,14 +260,6 @@ onMounted(() => {
             </div>
           </div>
 
-          <template v-if="!submitted">
-            <div class="flex-1" />
-
-            <div class="select-none text-center text-gray-500 dark:text-slate-200">
-              {{ index + 1 }} / {{ formColumns?.length }}
-            </div>
-          </template>
-
           <Transition name="slide-left">
             <div v-if="submitted" class="flex flex-col justify-center items-center text-center">
               <div class="text-lg px-6 py-3 bg-green-300 text-gray-700 rounded">
@@ -294,6 +291,13 @@ onMounted(() => {
       </Transition>
     </div>
 
+    <template v-if="!submitted">
+      <div class="mb-24 md:my-4 select-none text-center text-gray-500 dark:text-slate-200">
+        {{ index + 1 }} / {{ formColumns?.length }}
+      </div>
+    </template>
+
+    <div class="relative flex w-full items-end">
       <Transition name="fade">
         <div
           v-if="!submitted"
@@ -319,6 +323,9 @@ onMounted(() => {
           </a-tooltip>
         </div>
       </Transition>
+
+      <GeneralPoweredBy />
+    </div>
   </div>
 </template>