From 4bbcb0f82bf445ed06772d6194a7a66fbcc92382 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 29 Jul 2022 12:03:45 +0530
Subject: [PATCH] fix(gui-v2): badge togglig issue

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/assets/style-v2.scss       |  2 +-
 .../smartsheet-toolbar/FieldsMenu.vue         | 27 ++++++++-----------
 2 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/packages/nc-gui-v2/assets/style-v2.scss b/packages/nc-gui-v2/assets/style-v2.scss
index 28d87b8488..740ddc4aee 100644
--- a/packages/nc-gui-v2/assets/style-v2.scss
+++ b/packages/nc-gui-v2/assets/style-v2.scss
@@ -94,5 +94,5 @@ html {
 }
 
 .nc-badge {
-  @apply relative after:(absolute top-[-2px] right-[-2px] w-[8px] h-[8px] rounded-full bg-primary content-['']);
+  @apply relative after:(absolute top-[-2px] right-[-2px] w-[8px] h-[8px] rounded-full bg-primary content-[''] !z-20);
 }
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
index 9a40ea7d78..ded9abae04 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
@@ -77,22 +77,17 @@ const onMove = (event: { moved: { newIndex: number } }) => {
 
 <template>
   <a-dropdown :trigger="['click']">
-    <a-button
-      v-t="['c:fields']"
-      class="nc-fields-menu-btn nc-toolbar-btn text-xs"
-      :class="{ 'nc-badge': isAnyFieldHidden }"
-      :disabled="isLocked"
-      size="small"
-    >
-      <div class="flex align-center gap-1">
-        <!--          <v-icon small class="mr-1" color="#777"> mdi-eye-off-outline </v-icon> -->
-        <MdiEyeIcon class="text-grey"></MdiEyeIcon>
-        <!-- Fields -->
-        <span class="text-xs text-capitalize nc-fields-menu-btn">{{ $t('objects.fields') }}</span>
-        <MdiMenuDownIcon class="text-grey"></MdiMenuDownIcon>
-      </div>
-    </a-button>
-
+    <div :class="{ 'nc-badge': isAnyFieldHidden }">
+      <a-button v-t="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn text-xs" :disabled="isLocked" size="small">
+        <div class="flex align-center gap-1">
+          <!--          <v-icon small class="mr-1" color="#777"> mdi-eye-off-outline </v-icon> -->
+          <MdiEyeIcon class="text-grey"></MdiEyeIcon>
+          <!-- Fields -->
+          <span class="text-xs text-capitalize nc-fields-menu-btn">{{ $t('objects.fields') }}</span>
+          <MdiMenuDownIcon class="text-grey"></MdiMenuDownIcon>
+        </div>
+      </a-button>
+    </div>
     <template #overlay>
       <div class="pt-0 min-w-[280px] bg-white shadow" @click.stop>
         <div class="p-1" @click.stop>