feat: wrap MultiSelect tags based on row-height

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

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

@@ -10,6 +10,7 @@ import {
   ColumnInj,
   IsKanbanInj,
   ReadonlyInj,
+  RowHeightInj,
   computed,
   enumColor,
   extractSdkResponseErrorMsg,
@@ -52,6 +53,11 @@ const isPublic = inject(IsPublicInj, ref(false))
 
 const isForm = inject(IsFormInj, ref(false))
 
+const rowHeight = inject(
+  RowHeightInj,
+  computed(() => undefined),
+)
+
 const selectedIds = ref<string[]>([])
 
 const aselect = ref<typeof AntSelect>()
@@ -327,7 +333,17 @@ const selectedOpts = computed(() => {
 
 <template>
   <div class="nc-multi-select h-full w-full flex items-center" :class="{ 'read-only': readOnly }" @click="toggleMenu">
-    <div v-if="!editable && !active" class="flex flex-nowrap">
+    <div
+      v-if="!editable && !active"
+      class="flex flex-wrap"
+      :style="{
+        'display': '-webkit-box',
+        'max-width': '100%',
+        '-webkit-line-clamp': rowHeight || 1,
+        '-webkit-box-orient': 'vertical',
+        'overflow': 'hidden',
+      }"
+    >
       <template v-for="selectedOpt of selectedOpts" :key="selectedOpt.value">
         <a-tag class="rounded-tag" :color="selectedOpt.color" :style="{ order: selectedOpt.index }">
           <span

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

@@ -326,7 +326,7 @@ const selectedOpt = computed(() => {
 }
 
 :deep(.ant-tag) {
-  @apply "rounded-tag";
+  @apply "rounded-tag" my-[2px];
 }
 
 :deep(.ant-select-clear) {

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

@@ -922,7 +922,7 @@ function addEmptyRow(row?: number) {
               <template #default="{ state }">
                 <tr
                   class="nc-grid-row"
-                  :style="{ height: rowHeight ? `${rowHeight * 1.5}rem` : `1.5rem` }"
+                  :style="{ height: rowHeight ? `${rowHeight * 1.8}rem` : `1.8rem` }"
                   :data-testid="`grid-row-${rowIndex}`"
                 >
                   <td key="row-index" class="caption nc-grid-cell pl-5 pr-1" :data-testid="`cell-Id-${rowIndex}`">