From c9ff7fd9babb9dd851eb5eca2cb5e7719657cd5a Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Sat, 30 Sep 2023 12:39:17 +0530
Subject: [PATCH] fix: ui form

---
 packages/nc-gui/components/cell/TextArea.vue          | 8 +++++++-
 packages/nc-gui/components/smartsheet/Cell.vue        | 4 ++--
 packages/nc-gui/components/smartsheet/Form.vue        | 2 +-
 packages/nc-gui/components/smartsheet/header/Cell.vue | 6 +++---
 4 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue
index 60fd3804db..aa893d4292 100644
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/packages/nc-gui/components/cell/TextArea.vue
@@ -28,6 +28,8 @@ const isEditColumn = inject(EditColumnInj, ref(false))
 
 const rowHeight = inject(RowHeightInj, ref(1 as const))
 
+const isForm = inject(IsFormInj, ref(false))
+
 const { showNull } = useGlobal()
 
 const vModel = useVModel(props, 'modelValue', emits, { defaultValue: '' })
@@ -72,6 +74,7 @@ onClickOutside(inputWrapperRef, (e) => {
       :class="{
         'min-h-10': rowHeight !== 1,
         'min-h-6.5': rowHeight === 1,
+        'h-full': isForm,
       }"
     >
       <textarea
@@ -80,7 +83,10 @@ onClickOutside(inputWrapperRef, (e) => {
         v-model="vModel"
         rows="4"
         class="h-full w-full outline-none border-none"
-        :class="`${editEnabled ? 'p-2' : ''}`"
+        :class="{
+          'p-2': editEnabled,
+          'py-1 h-full': isForm,
+        }"
         :style="{
           minHeight: `${height}px`,
         }"
diff --git a/packages/nc-gui/components/smartsheet/Cell.vue b/packages/nc-gui/components/smartsheet/Cell.vue
index 9312399a4e..dd3840469e 100644
--- a/packages/nc-gui/components/smartsheet/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/Cell.vue
@@ -48,7 +48,6 @@ import {
   useDebounceFn,
   useProject,
   useSmartsheetRowStoreOrThrow,
-  useVModel,
 } from '#imports'
 
 interface Props {
@@ -205,7 +204,8 @@ onUnmounted(() => {
         'nc-grid-numeric-cell-right': isGrid && isNumericField && !isEditColumnMenu && !isForm && !isExpandedFormOpen,
         'h-10': isForm && !isSurveyForm && !isAttachment(column) && !props.virtual,
         'nc-grid-numeric-cell-left': (isForm && isNumericField && isExpandedFormOpen) || isEditColumnMenu,
-        'h-40': column.uidt === 'LongText' && props.editEnabled,
+        '!min-h-40': isTextArea(column) && props.editEnabled,
+        '!border-2': props.editEnabled,
       },
     ]"
     @keydown.enter.exact="navigate(NavigateDir.NEXT, $event)"
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 16fc500f54..a2a788533f 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -691,7 +691,7 @@ watch(view, (nextView) => {
                         </a-input>
                       </a-form-item>
 
-                      <a-form-item class="mt-2 mb-0 w-1/2 !mb-1">
+                      <a-form-item class="mt-2 mb-0 w-1/2">
                         <a-input
                           v-model:value="element.description"
                           type="text"
diff --git a/packages/nc-gui/components/smartsheet/header/Cell.vue b/packages/nc-gui/components/smartsheet/header/Cell.vue
index 2299c14ea3..8e1ccf7b63 100644
--- a/packages/nc-gui/components/smartsheet/header/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/header/Cell.vue
@@ -66,9 +66,8 @@ const openDropDown = () => {
     <SmartsheetHeaderCellIcon v-if="column && !props.hideIcon" />
     <div
       v-if="column"
-      class="name pl-1 !truncate"
+      class="name pl-1"
       :class="{ 'cursor-pointer pt-0.25': !isForm && isUIAllowed('fieldEdit') && !hideMenu }"
-      style="white-space: pre-line"
       :title="column.title"
     >
       {{ column.title }}
@@ -114,6 +113,7 @@ const openDropDown = () => {
 <style scoped>
 .name {
   max-width: calc(100% - 10px);
-  word-break: break-all;
+  word-break: break-word;
+  white-space: pre-line;
 }
 </style>