feat(gui-v2): row number cell correction

Signed-off-by: Pranav C <pranavxc@gmail.com>

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

@@ -300,7 +300,7 @@ const expandForm = (row: Row, state: Record<string, any>) => {
           <thead>
             <tr class="nc-grid-header border-1 bg-gray-100 sticky top[-1px]">
               <th>
-                <div class="w-full h-full bg-gray-100 flex w-[80px] px-1 items-center">
+                <div class="w-full h-full bg-gray-100 flex min-w-[80px] pl-5 pr-1 items-center">
                   <div class="nc-no-label text-gray-500" :class="{ hidden: selectedAllRecords }">#</div>
                   <div
                     :class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
@@ -346,28 +346,26 @@ const expandForm = (row: Row, state: Record<string, any>) => {
             <SmartsheetRow v-for="(row, rowIndex) of data" :key="rowIndex" :row="row">
               <template #default="{ state }">
                 <tr class="nc-grid-row">
-                  <td key="row-index" class="caption nc-grid-cell">
-                    <div class="align-center flex w-[80px]">
+                  <td key="row-index" class="caption nc-grid-cell pl-5 pr-1">
+                    <div class="align-center flex min-w-[80px]">
                       <div class="nc-row-no" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
                       <div
                         :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
                         class="nc-row-expand-and-checkbox"
                       >
                         <a-checkbox v-model:checked="row.rowMeta.selected" />
+                      </div>
                       <span class="flex-1" />
-                        <div class="nc-expand">
+                      <div class="nc-expand" :class="{ 'nc-comment': row.rowMeta?.commentCount }">
                         <span
                           v-if="row.rowMeta?.commentCount"
-                            class="py-1 px-3 rounded-full text-xs"
+                          class="py-1 px-3 rounded-full text-xs cursor-pointer select-none transform hover:(scale-110)"
                           :style="{ backgroundColor: enumColor.light[row.rowMeta.commentCount % enumColor.light.length] }"
                           @click="expandForm(row, state)"
                         >
                           {{ row.rowMeta.commentCount }}
                         </span>
-                          <div
-                            v-else
-                            class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:bg-primary/10"
-                          >
+                        <div v-else class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:bg-primary/10">
                           <MdiArrowExpand
                             class="select-none transform hover:(text-pink-500 scale-120)"
                             @click="expandForm(row, state)"
@@ -375,7 +373,6 @@ const expandForm = (row: Row, state: Record<string, any>) => {
                         </div>
                       </div>
                     </div>
-                    </div>
                   </td>
                   <td
                     v-for="(columnObj, colIndex) of fields"
@@ -482,7 +479,7 @@ const expandForm = (row: Row, state: Record<string, any>) => {
     position: relative;
   }
 
-  td > div {
+  td:not(:first-child) > div {
     overflow: hidden;
     @apply flex align-center h-auto px-1;
   }
@@ -532,11 +529,16 @@ const expandForm = (row: Row, state: Record<string, any>) => {
 
 .nc-grid-row {
   .nc-row-expand-and-checkbox {
-    @apply w-full items-center justify-between p-1;
+    @apply w-full items-center justify-between;
   }
   .nc-expand {
+    &:not(.nc-comment) {
       @apply hidden;
     }
+    &.nc-comment {
+      display: flex;
+    }
+  }
 
   &:hover {
     .nc-row-no {

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

@@ -19,7 +19,9 @@ const page = computed({
 
 <template>
   <div class="flex items-center">
-    <span v-if="count !== null && count !== Infinity" class="caption ml-2 text-gray-500"> {{ count }} record{{ count !== 1 ? 's' : '' }} </span>
+    <span v-if="count !== null && count !== Infinity" class="caption ml-2 text-gray-500">
+      {{ count }} record{{ count !== 1 ? 's' : '' }}
+    </span>
 
     <div class="flex-1" />