refactor(gui-v2): apply tab style only for the root tab

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/pages/nc/[projectId]/index.vue

@@ -56,7 +56,7 @@ await loadTables()
         collapsible
         theme="light"
       >
-        <div style="height: var(--header-height)" class="flex items-center !bg-primary text-white px-1 pl-6 gap-2">
+        <div style="height: var(--header-height)" class="flex items-center !bg-primary text-white px-1 pl-5 gap-2">
           <div
             v-if="isOpen"
             class="w-[40px] min-w-[40px] transition-all duration-200 p-1 cursor-pointer transform hover:scale-105"

packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue

@@ -46,7 +46,7 @@ const icon = (tab: TabItem) => {
   <div class="h-full w-full nc-container pt-[9px]">
     <div class="h-full w-full flex flex-col">
       <div>
-        <a-tabs v-model:activeKey="activeTabIndex" type="editable-card" @edit="closeTab">
+        <a-tabs v-model:activeKey="activeTabIndex" class="nc-root-tabs" type="editable-card" @edit="closeTab">
           <a-tab-pane v-for="(tab, i) in tabs" :key="i">
             <template #tab>
               <div class="flex align-center gap-2">
@@ -154,14 +154,29 @@ const icon = (tab: TabItem) => {
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .nc-container {
   height: calc(100% - var(--header-height));
   flex: 1 1 100%;
 }
 
-:deep(.ant-tabs-nav) {
+:deep(.nc-root-tabs) {
-  @apply !mb-0;
+  & > .ant-tabs-nav {
+    @apply !mb-0;
+
+    & > .ant-tabs-nav-wrap > .ant-tabs-nav-list {
+      & > .ant-tabs-nav-add {
+        @apply !hidden;
+      }
+
+      & > .ant-tabs-tab-active {
+        @apply font-weight-medium;
+      }
+      & > .ant-tabs-tab:not(.ant-tabs-tab-active) {
+        @apply bg-gray-100;
+      }
+    }
+  }
 }
 
 :deep(.ant-menu-item-selected) {
@@ -173,16 +188,4 @@ const icon = (tab: TabItem) => {
 :deep(.ant-menu-submenu::after) {
   @apply !border-none;
 }
-
-:deep(.ant-tabs-nav-add) {
-  @apply !hidden;
-}
-
-:deep(.ant-tabs-tab-active) {
-  @apply font-weight-medium;
-}
-
-:deep(.ant-tabs-tab:not(.ant-tabs-tab-active)) {
-  @apply bg-gray-100;
-}
 </style>