feat(gui): replace ClampText with css to improve performance of grid view

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

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

@@ -3,35 +3,18 @@ const props = defineProps<{
   value?: string | number | null
   lines?: number
 }>()
-
-const wrapper = ref()
-
-const key = ref(0)
-
-const debouncedRefresh = useDebounceFn(() => {
-  key.value++
-}, 500)
-
-onMounted(() => {
-  const observer = new ResizeObserver(() => {
-    debouncedRefresh()
-  })
-
-  observer.observe(wrapper.value)
-})
 </script>
 
 <template>
-  <div ref="wrapper">
+  <div
-    <!--
+    :style="{
-      using '' for :text in text-clamp would keep the previous cell value after changing a filter
+      'display': '-webkit-box',
-      use ' ' instead of '' to trigger update
+      'max-width': '100%',
-    -->
+      '-webkit-line-clamp': props.lines || 1,
-    <text-clamp
+      '-webkit-box-orient': 'vertical',
-      :key="`clamp-${key}-${props.value?.toString().length || 0}`"
+      'overflow': 'hidden',
-      class="w-full h-full break-word"
+    }"
-      :text="`${props.value || ' '}`"
+  >
-      :max-lines="props.lines || 1"
+    {{ props.value || '' }}
-    />
   </div>
 </template>