Merge pull request #7839 from nocodb/nc-fix/row-height-menu-dropdown

Nc fix(nc-gui): row height menu dropdown ui changes

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

@@ -3,6 +3,25 @@ import { OrgUserRoles, ProjectRoles, extractRolesObj } from 'nocodb-sdk'
 import type { GridType } from 'nocodb-sdk'
 import { ActiveViewInj, IsLockedInj, iconMap, inject, ref, storeToRefs, useMenuCloseOnEsc, useUndoRedo } from '#imports'
 
+const rowHeightOptions: { icon: keyof typeof iconMap; heightClass: string }[] = [
+  {
+    icon: 'heightShort',
+    heightClass: 'short',
+  },
+  {
+    icon: 'heightMedium',
+    heightClass: 'medium',
+  },
+  {
+    icon: 'heightTall',
+    heightClass: 'tall',
+  },
+  {
+    icon: 'heightExtra',
+    heightClass: 'extra',
+  },
+]
+
 const { isSharedBase } = storeToRefs(useBase())
 
 const view = inject(ActiveViewInj, ref())
@@ -75,38 +94,21 @@ useMenuCloseOnEsc(open)
     </div>
     <template #overlay>
       <div
-        class="w-full bg-white shadow-lg p-1.5 menu-filter-dropdown border-1 border-gray-200 rounded-md overflow-hidden"
+        class="w-full bg-white shadow-lg p-1.5 menu-filter-dropdown border-1 border-gray-200 rounded-md overflow-hidden w-[160px]"
         data-testid="nc-height-menu"
       >
         <div class="flex flex-col w-full text-sm" @click.stop>
           <div class="text-xs text-gray-500 px-3 pt-2 pb-1 select-none">{{ $t('objects.rowHeight') }}</div>
-          <div class="nc-row-height-option" @click="updateRowHeight(0)">
-            <GeneralIcon icon="heightShort" class="nc-row-height-icon" />
-            {{ $t('objects.heightClass.short') }}
-            <component :is="iconMap.check" v-if="!(view?.view as GridType).row_height" class="text-primary w-4 h-4" />
-          </div>
-          <div class="nc-row-height-option" @click="updateRowHeight(1)">
-            <GeneralIcon icon="heightMedium" class="nc-row-height-icon" />
-            {{ $t('objects.heightClass.medium') }}
-            <component :is="iconMap.check" v-if=" (view?.view as GridType).row_height === 1" class="text-primary w-4 h-4" />
-          </div>
-          <div
-            class="nc-row-height-option"
-            :class="{'active': (view?.view as GridType).row_height === 2}"
-            @click="updateRowHeight(2)"
-          >
-            <GeneralIcon icon="heightTall" class="nc-row-height-icon" />
-            {{ $t('objects.heightClass.tall') }}
-            <component :is="iconMap.check" v-if=" (view?.view as GridType).row_height === 2" class="text-primary w-4 h-4" />
-          </div>
-          <div
-            class="nc-row-height-option"
-            :class="{'active': (view?.view as GridType).row_height === 3}"
-            @click="updateRowHeight(3)"
-          >
-            <GeneralIcon icon="heightExtra" class="nc-row-height-icon" />
-            {{ $t('objects.heightClass.extra') }}
-            <component :is="iconMap.check" v-if=" (view?.view as GridType).row_height === 3" class="text-primary w-4 h-4" />
+          <div v-for="(item, i) of rowHeightOptions" class="nc-row-height-option" @click="updateRowHeight(i)">
+            <div class="flex items-center gap-2">
+              <GeneralIcon :icon="item.icon" class="nc-row-height-icon" />
+              {{ $t(`objects.heightClass.${item.heightClass}`) }}
+            </div>
+            <component
+              :is="iconMap.check"
+              v-if="i === 0 ? !(view?.view as GridType).row_height: (view?.view as GridType).row_height === i"
+              class="text-primary w-4 h-4"
+            />
           </div>
         </div>
       </div>
@@ -116,7 +118,7 @@ useMenuCloseOnEsc(open)
 
 <style scoped>
 .nc-row-height-option {
-  @apply flex items-center gap-2 p-2 justify-start hover:bg-gray-100 rounded-md cursor-pointer text-gray-600;
+  @apply flex items-center gap-2 p-2 justify-between hover:bg-gray-100 rounded-md cursor-pointer text-gray-600;
 }
 
 .nc-row-height-icon {