fic(nc-gui): form title and subtitle ui changes

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

@@ -553,7 +553,7 @@ useEventListener(
             >
               <a-form ref="formRef" :model="formState" class="nc-form" no-style>
                 <!-- form header -->
-                <div class="flex flex-col gap-4 px-8 lg:px-12 mb-6">
+                <div class="flex flex-col px-4 lg:px-6">
                   <!-- Form logo  -->
                   <!-- <div v-if="isEditable">
                     <div class="inline-block rounded-xl bg-gray-100 p-3">
@@ -566,11 +566,28 @@ useEventListener(
                     </div>
                   </div> -->
                   <!-- form title -->
-
-                  <a-form-item v-if="isEditable">
+                  <div
+                    :class="[
+                      `border-transparent px-4 lg:px-6`,
+                      {
+                        'rounded-2xl overflow-hidden border-2 cursor-pointer mb-1 py-4 lg:py-6': isEditable,
+                      },
+                      {
+                        'mb-4 py-0 lg:py-0': !isEditable,
+                      },
+                      {
+                        'hover:bg-gray-50': activeRow !== 'nc-form-heading' && isEditable,
+                      },
+                      {
+                        '!hover:bg-white !ring-0 !cursor-auto': isLocked,
+                      },
+                    ]"
+                    @click.stop="onFormItemClick({ title: 'nc-form-heading' })"
+                  >
+                    <a-form-item v-if="isEditable" class="!my-0">
                       <a-textarea
                         v-model:value="formViewData.heading"
-                      class="nc-form-focus-element w-full !font-bold !text-4xl !border-0 !border-b-1 !border-dashed !rounded-none !border-gray-400"
+                        class="nc-form-focus-element !p-0 !m-0 w-full !font-bold !text-2xl !border-0 !rounded-none !text-gray-900"
                         :style="{
                           'borderRightWidth': '0px !important',
                           'height': '70px',
@@ -590,20 +607,37 @@ useEventListener(
                       />
                     </a-form-item>
 
-                  <div v-else class="w-full text-bold text-4xl">
+                    <div v-else class="text-bold text-2xl text-gray-900">
                       {{ formViewData.heading }}
                     </div>
+                  </div>
 
                   <!-- form description  -->
-                  <a-form-item v-if="isEditable" class="w-full">
+                  <div
+                    :class="[
+                      `border-transparent px-4 lg:px-6`,
+                      {
+                        'rounded-2xl overflow-hidden border-2 cursor-pointer mb-1 py-4 lg:py-6': isEditable,
+                      },
+                      {
+                        'mb-4 py-0 lg:py-0': !isEditable,
+                      },
+                      {
+                        'hover:bg-gray-50': activeRow !== 'nc-form-sub-heading' && isEditable,
+                      },
+                      {
+                        '!hover:bg-white !ring-0 !cursor-auto': isLocked,
+                      },
+                    ]"
+                    @click.stop="onFormItemClick({ title: 'nc-form-sub-heading' })"
+                  >
+                    <a-form-item v-if="isEditable" class="w-full !my-0">
                       <a-textarea
                         v-model:value="formViewData.subheading"
-                      class="nc-form-focus-element w-full !border-0 !border-b-1 !border-dashed !rounded-none !border-gray-400"
+                        class="nc-form-focus-element w-full !p-0 !m-0 !border-0 !rounded-none !text-gray-500"
                         :style="{
-                        'borderRightWidth': '0px !important',
-                        'height': '40px',
-                        'min-height': '40px',
-                        'resize': 'vertical',
+                          borderRightWidth: '0px !important',
+                          resize: 'vertical',
                         }"
                         size="large"
                         auto-size
@@ -618,10 +652,11 @@ useEventListener(
                       />
                     </a-form-item>
 
-                  <div v-else class="w-full text-bold text-base">
+                    <div v-else class="text-bold text-base text-gray-500">
                       {{ formViewData.subheading || '---' }}
                     </div>
                   </div>
+                </div>
 
                 <Draggable
                   ref="draggableRef"