From e43888158ed4ffdf65421fba1d34ec60188160a1 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 18 Jan 2023 11:13:37 +0300
Subject: [PATCH] fix: PR requested changes

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components/cell/ClampedText.vue  |  6 +++---
 packages/nc-gui/components/cell/Text.vue         |  2 +-
 packages/nc-gui/components/cell/TextArea.vue     |  2 +-
 .../components/smartsheet/toolbar/RowHeight.vue  | 16 +++++++++++-----
 4 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui/components/cell/ClampedText.vue b/packages/nc-gui/components/cell/ClampedText.vue
index 5a74755ea3..2bdd8cc409 100644
--- a/packages/nc-gui/components/cell/ClampedText.vue
+++ b/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>
diff --git a/packages/nc-gui/components/cell/Text.vue b/packages/nc-gui/components/cell/Text.vue
index 47639dfc2a..7e0ad4279c 100644
--- a/packages/nc-gui/components/cell/Text.vue
+++ b/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>
diff --git a/packages/nc-gui/components/cell/TextArea.vue b/packages/nc-gui/components/cell/TextArea.vue
index 449c78e2d8..5dd2ee702d 100644
--- a/packages/nc-gui/components/cell/TextArea.vue
+++ b/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>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue b/packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue
index e05bc10eb8..444c2f0f68 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue
+++ b/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>