refactor(gui-v2): v1 form layout

packages/nc-gui-v2/components/smartsheet/Form.vue

@@ -422,10 +422,11 @@ onMounted(async () => {
       </Draggable>
     </a-col>
     <a-col v-if="formViewData" :span="isEditable ? 16 : 24" class="h-full overflow-auto scrollbar-thin-primary">
-      <a-card class="h-full">
-        <a-form ref="formRef" :model="formState" class="bg-[#fefefe]">
+      <div class="h-[200px]">
+        <a-card class="h-full !bg-[#dbdad7] ma-0 rounded-b-0">
+          <a-form ref="formRef" :model="formState">
+            <a-card class="rounded ma-10">
               <!-- Header -->
-          <div class="pb-2">
               <a-form-item class="ma-0 gap-0 pa-0">
                 <a-input
                   v-model:value="formViewData.heading"
@@ -438,7 +439,6 @@ onMounted(async () => {
                   @keydown.enter="updateView"
                 />
               </a-form-item>
-          </div>
               <!-- Sub Header -->
               <a-form-item>
                 <a-input
@@ -504,7 +504,12 @@ onMounted(async () => {
                       :name="element.title"
                       :rules="[{ required: element.required, message: `${element.title} is required` }]"
                     >
-                  <SmartsheetCell v-model="formState[element.title]" class="nc-input" :column="element" :edit-enabled="true" />
+                      <SmartsheetCell
+                        v-model="formState[element.title]"
+                        class="nc-input"
+                        :column="element"
+                        :edit-enabled="true"
+                      />
                     </a-form-item>
                     <div v-if="activeRow === element.title">
                       <a-form-item class="my-0 w-1/2">
@@ -538,11 +543,15 @@ onMounted(async () => {
                   </div>
                 </template>
                 <template #footer>
-              <div v-if="!localColumns.length" class="mt-4 border-dashed border-2 border-gray-400 py-3 text-gray-400 text-center">
+                  <div
+                    v-if="!localColumns.length"
+                    class="mt-4 border-dashed border-2 border-gray-400 py-3 text-gray-400 text-center"
+                  >
                     Drag and drop fields here to add
                   </div>
                 </template>
               </Draggable>
+            </a-card>
           </a-form>
 
           <div class="justify-center flex mt-5">
@@ -574,7 +583,11 @@ onMounted(async () => {
 
             <div class="my-4">
               <!-- Show a blank form after 5 seconds -->
-            <a-switch v-model:checked="formViewData.show_blank_form" v-t="[`a:form-view:show-blank-form`]" @change="updateView" />
+              <a-switch
+                v-model:checked="formViewData.show_blank_form"
+                v-t="[`a:form-view:show-blank-form`]"
+                @change="updateView"
+              />
               <span class="ml-4">{{ $t('msg.info.showBlankForm') }}</span>
             </div>
             <div class="my-4">
@@ -586,6 +599,7 @@ onMounted(async () => {
             </div>
           </div>
         </a-card>
+      </div>
     </a-col>
   </a-row>
 </template>