Nc fix/expanded form bug fixes (#8501)

* fix(nc-gui): reduce gap between username and comment

* fix(nc-gui): remove expanded form audit tab right padding

* fix(nc-gui): save record should be on left side

* fix(nc-gui): increase expanded form field gap

* expanded form box shadow

* fix(nc-gui): expanded form field alignment issue

* fix(nc-gui): update expanded form hover state style

* fix(nc-gui): update expanded form field hover and selected state style

* chore(nc-gui): lint

---------

Co-authored-by: Raju Udava <86527202+dstala@users.noreply.github.com>

packages/nc-gui/components/project/AllTables.vue

@@ -105,7 +105,7 @@ const onCreateBaseClick = () => {
         <GeneralIcon icon="download" />
         <div class="label">{{ $t('activity.import') }} {{ $t('general.data') }}</div>
       </div>
-<!--      <component :is="isDataSourceLimitReached ? NcTooltip : 'div'" v-if="isUIAllowed('sourceCreate')">
+      <!--      <component :is="isDataSourceLimitReached ? NcTooltip : 'div'" v-if="isUIAllowed('sourceCreate')">
         <template #title>
           <div>
             {{ $t('tooltip.reachedSourceLimit') }}
@@ -124,7 +124,7 @@ const onCreateBaseClick = () => {
           <GeneralIcon icon="dataSource" />
           <div class="label">{{ $t('labels.connectDataSource') }}</div>
         </div>
-      </component>-->
+      </component> -->
     </div>
     <div
       v-if="base?.isLoading"
@@ -191,7 +191,7 @@ const onCreateBaseClick = () => {
     </div>
 
     <ProjectImportModal v-if="defaultBase" v-model:visible="isImportModalOpen" :source="defaultBase" />
-<!--    <LazyDashboardSettingsDataSourcesCreateBase v-model:open="isNewBaseModalOpen" />-->
+    <!--    <LazyDashboardSettingsDataSourcesCreateBase v-model:open="isNewBaseModalOpen" /> -->
   </div>
 </template>
 

packages/nc-gui/components/project/View.vue

@@ -162,7 +162,7 @@ watch(
           </template>
           <ProjectAccessSettings :base-id="currentBase?.id" />
         </a-tab-pane>
-<!--        <a-tab-pane v-if="isUIAllowed('sourceCreate')" key="data-source">
+        <!--        <a-tab-pane v-if="isUIAllowed('sourceCreate')" key="data-source">
           <template #tab>
             <div class="tab-title" data-testid="proj-view-tab__data-sources">
               <GeneralIcon icon="database" />
@@ -180,7 +180,7 @@ watch(
             </div>
           </template>
           <DashboardSettingsDataSources v-model:state="baseSettingsState" />
-        </a-tab-pane>-->
+        </a-tab-pane> -->
       </a-tabs>
     </div>
   </div>

packages/nc-gui/components/smartsheet/expanded-form/Comments.vue

@@ -166,10 +166,10 @@ watch(commentsWrapperEl, () => {
             <div v-else ref="commentsWrapperEl" class="flex flex-col h-full py-1 nc-scrollbar-thin">
               <div v-for="log of comments" :key="log.id">
                 <div class="group gap-3 overflow-hidden hover:bg-gray-200 flex items-start px-3 pt-3 pb-4">
-                  <GeneralUserIcon size="medium" :name="log.display_name" :email="log.user" class="mt-0.5" />
-                  <div class="flex-1 flex flex-col gap-1 max-w-[calc(100%_-_24px)]">
+                  <GeneralUserIcon size="medium" :name="log.display_name" :email="log.user" class="mt-0.7" />
+                  <div class="flex-1 flex flex-col gap-0.5 max-w-[calc(100%_-_24px)]">
                     <div class="w-full flex justify-between gap-3 min-h-7">
-                      <div class="flex items-start max-w-[calc(100%_-_40px)]">
+                      <div class="flex items-center max-w-[calc(100%_-_40px)]">
                         <div class="w-full flex flex-wrap items-center">
                           <NcTooltip class="truncate max-w-42 mr-2" show-on-truncate-only>
                             <template #title>
@@ -389,7 +389,7 @@ watch(commentsWrapperEl, () => {
   .ant-tabs-nav {
     @apply px-3;
     .ant-tabs-nav-list {
-      @apply w-[calc(100%_-_24px)] gap-6;
+      @apply w-full gap-6;
 
       .ant-tabs-tab {
         @apply flex-1 flex items-center justify-center pt-3 pb-2.5;

packages/nc-gui/components/smartsheet/expanded-form/index.vue

@@ -562,7 +562,7 @@ export default {
       <div
         class="flex min-h-7 flex-shrink-0 w-full items-center nc-expanded-form-header relative p-4 xs:(px-2 py-0 min-h-[48px]) justify-between"
       >
-        <div class="flex-1 flex gap-3 lg:w-100 <lg:max-w-[calc(100%_-_178px)] xs:(max-w-[calc(100%_-_44px)])">
+        <div class="flex-1 flex gap-4 lg:w-100 <lg:max-w-[calc(100%_-_178px)] xs:(max-w-[calc(100%_-_44px)])">
           <div class="flex gap-2">
             <NcTooltip v-if="props.showNextPrevIcons">
               <template #title> {{ renderAltOrOptlKey() }} + ← </template>
@@ -601,13 +601,13 @@ export default {
             }"
           >
             <div v-if="meta.title" class="flex items-center gap-2 px-2 py-1 rounded-lg bg-gray-100 text-gray-800">
-              <GeneralTableIcon :meta="meta" class="!text-gray-800" />
+              <GeneralTableIcon :meta="meta" class="!text-gray-800 !mx-0" />
 
-              <NcTooltip class="truncate max-w-[100px] xs:(max-w-[82px]) h-5" show-on-truncate-only>
+              <NcTooltip class="truncate text-sm max-w-[100px] xs:(max-w-[82px]) align-middle" show-on-truncate-only>
                 <template #title>
                   {{ meta.title }}
                 </template>
-                <span class="font-weight-500 truncate text-sm"> {{ meta.title }} </span>
+                <span class="font-weight-500 truncate text-sm">{{ meta.title }}</span>
               </NcTooltip>
             </div>
             <div
@@ -627,6 +627,21 @@ export default {
           </div>
         </div>
         <div class="flex gap-2">
+          <NcTooltip v-if="!isMobileMode && isUIAllowed('dataEdit')">
+            <template #title> {{ renderAltOrOptlKey() }} + S </template>
+            <NcButton
+              v-e="['c:row-expand:save']"
+              :disabled="changedColumns.size === 0 && !isUnsavedFormExist"
+              :loading="isSaving"
+              class="nc-expand-form-save-btn !xs:(text-base) !h-7 !px-2"
+              data-testid="nc-expanded-form-save"
+              type="primary"
+              size="xsmall"
+              @click="save"
+            >
+              <div class="xs:px-1">{{ newRecordSubmitBtnText ?? 'Save Record' }}</div>
+            </NcButton>
+          </NcTooltip>
           <NcButton
             v-if="!isNew && rowId && !isMobileMode"
             :disabled="isLoading"
@@ -645,21 +660,6 @@ export default {
               {{ isRecordLinkCopied ? $t('labels.copiedRecordURL') : $t('labels.copyRecordURL') }}
             </div>
           </NcButton>
-          <NcTooltip v-if="!isMobileMode && isUIAllowed('dataEdit')">
-            <template #title> {{ renderAltOrOptlKey() }} + S </template>
-            <NcButton
-              v-e="['c:row-expand:save']"
-              :disabled="changedColumns.size === 0 && !isUnsavedFormExist"
-              :loading="isSaving"
-              class="nc-expand-form-save-btn !xs:(text-base) !h-7 !px-2"
-              data-testid="nc-expanded-form-save"
-              type="primary"
-              size="xsmall"
-              @click="save"
-            >
-              <div class="xs:px-1">{{ newRecordSubmitBtnText ?? 'Save Record' }}</div>
-            </NcButton>
-          </NcTooltip>
           <NcDropdown v-if="!isNew && rowId && !isMobileMode" placement="bottomRight">
             <NcButton type="text" size="xsmall" class="nc-expand-form-more-actions !w-7 !h-7" :disabled="isLoading">
               <GeneralIcon icon="threeDotVertical" class="text-md" :class="isLoading ? 'text-gray-300' : 'text-gray-700'" />
@@ -730,7 +730,7 @@ export default {
         >
           <div
             ref="expandedFormScrollWrapper"
-            class="flex flex-col flex-grow gap-3 h-full max-h-full nc-scrollbar-thin items-center w-full p-4 xs:(px-4 pt-4 pb-2 gap-6) children:max-w-[588px] <lg:(children:max-w-[450px])"
+            class="flex flex-col flex-grow gap-4 h-full max-h-full nc-scrollbar-thin items-center w-full p-4 xs:(px-4 pt-4 pb-2 gap-6) children:max-w-[588px] <lg:(children:max-w-[450px])"
           >
             <div
               v-for="(col, i) of fields"
@@ -1024,14 +1024,18 @@ export default {
 }
 
 .nc-data-cell {
-  box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
-  &:hover,
+  @apply !rounded-lg;
+  transition: all 0.3s;
+  &:hover {
+    @apply !border-1 !border-brand-400;
+  }
+
   &:focus-within {
-    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1) !important;
+    box-shadow: 0px 0px 0px 2px rgba(51, 102, 255, 0.24) !important;
   }
 }
 .nc-data-cell:focus-within {
-  @apply !border-1 !border-brand-500 !rounded-lg;
+  @apply !border-1 !border-brand-500;
 }
 
 :deep(.nc-system-field input) {

packages/nc-gui/components/smartsheet/header/Cell.vue

@@ -99,7 +99,7 @@ const onClick = (e: Event) => {
     :class="{
       'h-full': column,
       '!text-gray-400': isKanban,
-      'flex-col !items-start justify-center': isExpandedForm && !isMobileMode,
+      'flex-col !items-start justify-center pt-0.5': isExpandedForm && !isMobileMode,
       'cursor-pointer hover:bg-gray-100': isExpandedForm && !isMobileMode && isUIAllowed('fieldEdit'),
       'bg-gray-100': isExpandedForm ? editColumnDropdown || isDropDownOpen : false,
     }"
@@ -138,7 +138,7 @@ const onClick = (e: Event) => {
       <NcTooltip
         v-if="column"
         :class="{
-          'cursor-pointer pt-0.25': !isForm && isUIAllowed('fieldEdit') && !hideMenu,
+          'cursor-pointer': !isForm && isUIAllowed('fieldEdit') && !hideMenu,
           'cursor-default': isForm || !isUIAllowed('fieldEdit') || hideMenu,
           'truncate': !isForm,
         }"
@@ -164,7 +164,7 @@ const onClick = (e: Event) => {
       <GeneralIcon
         v-if="isExpandedForm && !isMobileMode && isUIAllowed('fieldEdit')"
         icon="arrowDown"
-        class="flex-none text-grey h-full text-grey cursor-pointer ml-1 group-hover:visible"
+        class="flex-none cursor-pointer ml-1 group-hover:visible w-4 h-4"
         :class="{
           visible: editColumnDropdown || isDropDownOpen,
           invisible: !(editColumnDropdown || isDropDownOpen),

packages/nc-gui/components/smartsheet/header/VirtualCell.vue

@@ -179,7 +179,7 @@ const onClick = (e: Event) => {
   <div
     class="flex items-center w-full h-full text-small text-gray-500 font-weight-medium group"
     :class="{
-      'flex-col !items-start justify-center': isExpandedForm,
+      'flex-col !items-start justify-center pt-0.5': isExpandedForm && !isMobileMode,
       'bg-gray-100': isExpandedForm ? editColumnDropdown || isDropDownOpen : false,
       'cursor-pointer hover:bg-gray-100': isExpandedForm && !isMobileMode && isUIAllowed('fieldEdit'),
     }"
@@ -220,7 +220,7 @@ const onClick = (e: Event) => {
       <GeneralIcon
         v-if="isExpandedForm && !isMobileMode && isUIAllowed('fieldEdit')"
         icon="arrowDown"
-        class="flex-none h-full cursor-pointer ml-1 group-hover:visible"
+        class="flex-none cursor-pointer ml-1 group-hover:visible w-4 h-4"
         :class="{
           visible: editColumnDropdown || isDropDownOpen,
           invisible: !(editColumnDropdown || isDropDownOpen),