From 2c56024f5665c39ccb811e3cc8b3346789de5553 Mon Sep 17 00:00:00 2001
From: musharaf-nocodb <musharaf@nocodb.com>
Date: Thu, 7 Dec 2023 12:13:56 +0530
Subject: [PATCH] fix : fixed select-item padding

---
 packages/nc-gui/assets/style.scss                  | 13 ++++++-------
 packages/nc-gui/components/nc/Select.vue           |  2 +-
 .../components/smartsheet/toolbar/RowHeight.vue    | 14 +++++++-------
 .../components/smartsheet/toolbar/SearchData.vue   |  7 -------
 4 files changed, 14 insertions(+), 22 deletions(-)

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index d7f2807fee..70cc3a4e1a 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -222,7 +222,7 @@ a {
 }
 // select dropdown border style
 .ant-select-dropdown {
-  @apply border-1 border-gray-200
+  @apply border-1 border-gray-200;
 }
 
 // menu item styling
@@ -425,9 +425,9 @@ a {
 
 .ant-dropdown-menu-submenu {
   @apply !py-0;
-  
-  &.ant-dropdown-menu-submenu-popup{
-    @apply border-1 border-gray-200
+
+  &.ant-dropdown-menu-submenu-popup {
+    @apply border-1 border-gray-200;
   }
   .ant-dropdown-menu,
   .ant-menu {
@@ -504,15 +504,14 @@ a {
 .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
   @apply bg-gray-300 bg-opacity-20;
 }
-/* Add this to your global or component-specific stylesheet */
 
 /* Hide the element with id selected-item-icon inside NcSelect */
 .ant-select-selection-item #selected-item-icon {
   display: none;
 }
 
-.ant-select-item-option-selected:not(.ant-select-item-option-disabled){
-  @apply bg-transparent 
+.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
+  @apply bg-transparent;
 }
 
 .ant-select-selection-search-input:focus {
diff --git a/packages/nc-gui/components/nc/Select.vue b/packages/nc-gui/components/nc/Select.vue
index 06cf174602..63c95c83c5 100644
--- a/packages/nc-gui/components/nc/Select.vue
+++ b/packages/nc-gui/components/nc/Select.vue
@@ -62,7 +62,7 @@ const onChange = (value: string) => {
 
 <style lang="scss">
 .ant-select-item {
-  @apply !xs:h-13;
+  @apply !xs:h-13 !p-2;
 }
 .ant-select-item-option-content {
   @apply !xs:mt-2.5;
diff --git a/packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue b/packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue
index 31069f28b5..4ed061ce67 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/RowHeight.vue
@@ -65,7 +65,7 @@ useMenuCloseOnEsc(open)
     </div>
     <template #overlay>
       <div
-        class="w-full bg-white shadow-lg p-2 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"
         data-testid="nc-height-menu"
       >
         <div class="flex flex-col w-full text-sm" @click.stop>
@@ -73,12 +73,12 @@ useMenuCloseOnEsc(open)
           <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" />
+            <component v-if="!(view?.view as GridType).row_height" class="text-primary w-5 h-5 " :is="iconMap.check" />
           </div>
           <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" />
+            <component v-if=" (view?.view as GridType).row_height === 1" class="text-primary w-5 h-5 " :is="iconMap.check" />
           </div>
           <div
             class="nc-row-height-option"
@@ -87,7 +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" />
+            <component v-if=" (view?.view as GridType).row_height === 2" class="text-primary w-5 h-5 " :is="iconMap.check" />
           </div>
           <div
             class="nc-row-height-option"
@@ -96,7 +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" />
+            <component v-if=" (view?.view as GridType).row_height === 3" class="text-primary w-5 h-5 " :is="iconMap.check" />
           </div>
         </div>
       </div>
@@ -106,10 +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 rounded-md cursor-pointer text-gray-600;
+  @apply flex items-center gap-2 p-2 justify-start hover:bg-gray-100 rounded-md cursor-pointer text-gray-600;
 }
 
 .nc-row-height-icon {
-  @apply mx-2 text-base;
+  @apply text-base;
 }
 </style>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
index 439f4c2d54..70b51cc764 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SearchData.vue
@@ -144,13 +144,6 @@ watch(columns, () => {
   </div>
 </template>
 
-<style lang="scss">
-.nc-dropdown-toolbar-search-field-option {
-  .ant-select-item-option {
-    @apply p-2;
-  }
-}
-</style>
 
 <style scoped>
 :deep(input::placeholder) {