fix: PR requested changes

Signed-off-by: mertmit <mertmit99@gmail.com>

packages/nc-gui/components/cell/ClampedText.vue

@@ -6,11 +6,11 @@ const props = defineProps<{
 
 const wrapper = ref()
 
-const rkey = ref(0)
+const key = ref(0)
 
 onMounted(() => {
   const observer = new ResizeObserver(() => {
-    rkey.value++
+    key.value++
   })
 
   observer.observe(wrapper.value)
@@ -19,6 +19,6 @@ onMounted(() => {
 
 <template>
   <div ref="wrapper">
-    <text-clamp :key="rkey" class="w-full h-full break-all" :text="props.value || ''" :max-lines="props.lines" />
+    <text-clamp :key="key" class="w-full h-full break-all" :text="props.value || ''" :max-lines="props.lines" />
   </div>
 </template>

packages/nc-gui/components/cell/Text.vue

@@ -38,5 +38,5 @@ const focus: VNodeRef = (el) => {
     @mousedown.stop
   />
 
-  <CellClampedText v-else :value="vModel" :lines="1" />
+  <LazyCellClampedText v-else :value="vModel" :lines="1" />
 </template>

packages/nc-gui/components/cell/TextArea.vue

@@ -53,7 +53,7 @@ const rowHeight = computed(() => {
     @mousedown.stop
   />
 
-  <CellClampedText v-else-if="rowHeight" :value="vModel" :lines="rowHeight" />
+  <LazyCellClampedText v-else-if="rowHeight" :value="vModel" :lines="rowHeight" />
 
   <span v-else>{{ vModel }}</span>
 </template>

packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue

@@ -3,7 +3,9 @@ import type { GridType } from 'nocodb-sdk'
 import { ActiveViewInj, IsLockedInj, ReloadViewDataHookInj, inject, ref, useMenuCloseOnEsc } from '#imports'
 
 const view = inject(ActiveViewInj, ref())
+
 const isLocked = inject(IsLockedInj, ref(false))
+
 const reloadDataHook = inject(ReloadViewDataHookInj)
 
 const { $api } = useNuxtApp()
@@ -49,14 +51,18 @@ useMenuCloseOnEsc(open)
       <div class="w-full bg-gray-50 shadow-lg menu-filter-dropdown !border" data-testid="nc-height-menu">
         <div class="text-gray-500 !text-xs px-4 py-2">Select a row height</div>
         <div class="flex flex-col w-full text-sm" @click.stop>
-          <div class="flex items-center py-1 px-2 justify-center hover:bg-gray-200" @click="updateRowHeight(0)">Short</div>
-          <div class="flex items-center py-1 px-2 justify-center hover:bg-gray-200" @click="updateRowHeight(1)">Medium</div>
-          <div class="flex items-center py-1 px-2 justify-center hover:bg-gray-200" @click="updateRowHeight(2)">Tall</div>
-          <div class="flex items-center py-1 px-2 justify-center hover:bg-gray-200" @click="updateRowHeight(3)">Extra</div>
+          <div class="nc-row-height-option" @click="updateRowHeight(0)">Short</div>
+          <div class="nc-row-height-option" @click="updateRowHeight(1)">Medium</div>
+          <div class="nc-row-height-option" @click="updateRowHeight(2)">Tall</div>
+          <div class="nc-row-height-option" @click="updateRowHeight(3)">Extra</div>
         </div>
       </div>
     </template>
   </a-dropdown>
 </template>
 
-<style scoped></style>
+<style scoped>
+.nc-row-height-option {
+  @apply flex items-center py-1 px-2 justify-center hover:bg-gray-200 cursor-pointer;
+}
+</style>