From e6e0fddb2451b3480f056f7738ff16a67cbb8846 Mon Sep 17 00:00:00 2001
From: musharaf-nocodb <musharaf@nocodb.com>
Date: Thu, 7 Dec 2023 10:26:31 +0530
Subject: [PATCH] fix : changed dropdown for rowHeight options

---
 .../smartsheet/toolbar/RowHeight.vue          | 24 +++++++------------
 1 file changed, 8 insertions(+), 16 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue b/packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue
index 93157f847f..31069f28b5 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue
@@ -65,26 +65,20 @@ useMenuCloseOnEsc(open)
     </div>
     <template #overlay>
       <div
-        class="w-full bg-white shadow-lg menu-filter-dropdown border-1 border-gray-200 rounded-md overflow-hidden"
+        class="w-full bg-white shadow-lg p-2 menu-filter-dropdown border-1 border-gray-200 rounded-md overflow-hidden"
         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"
-            :class="{'active': !(view?.view as GridType).row_height }"
-            @click="updateRowHeight(0)"
-          >
+          <div class="nc-row-height-option" @click="updateRowHeight(0)">
             <GeneralIcon icon="heightShort" class="nc-row-height-icon" />
             {{ $t('objects.heightClass.short') }}
+            <component v-if="!(view?.view as GridType).row_height" class="text-primary w-5 h-5 ml-2" :is="iconMap.check" />
           </div>
-          <div
-            class="nc-row-height-option"
-            :class="{'active': (view?.view as GridType).row_height === 1}"
-            @click="updateRowHeight(1)"
-          >
+          <div class="nc-row-height-option" @click="updateRowHeight(1)">
             <GeneralIcon icon="heightMedium" class="nc-row-height-icon" />
             {{ $t('objects.heightClass.medium') }}
+            <component v-if=" (view?.view as GridType).row_height === 1" class="text-primary w-5 h-5 ml-2" :is="iconMap.check" />
           </div>
           <div
             class="nc-row-height-option"
@@ -93,6 +87,7 @@ useMenuCloseOnEsc(open)
           >
             <GeneralIcon icon="heightTall" class="nc-row-height-icon" />
             {{ $t('objects.heightClass.tall') }}
+            <component v-if=" (view?.view as GridType).row_height === 2" class="text-primary w-5 h-5 ml-2" :is="iconMap.check" />
           </div>
           <div
             class="nc-row-height-option"
@@ -101,6 +96,7 @@ useMenuCloseOnEsc(open)
           >
             <GeneralIcon icon="heightExtra" class="nc-row-height-icon" />
             {{ $t('objects.heightClass.extra') }}
+            <component v-if=" (view?.view as GridType).row_height === 3" class="text-primary w-5 h-5 ml-2" :is="iconMap.check" />
           </div>
         </div>
       </div>
@@ -110,14 +106,10 @@ useMenuCloseOnEsc(open)
 
 <style scoped>
 .nc-row-height-option {
-  @apply flex items-center py-2 pl-1 pr-2 justify-start hover:bg-gray-100 cursor-pointer text-gray-600;
+  @apply flex items-center py-2 pl-1 pr-2 justify-start hover:bg-gray-100 rounded-md cursor-pointer text-gray-600;
 }
 
 .nc-row-height-icon {
   @apply mx-2 text-base;
 }
-
-.active {
-  @apply bg-primary-selected;
-}
 </style>