fix: Fixed details tab

packages/nc-gui/components/nc/Tabs.vue

@@ -27,6 +27,10 @@ const props = defineProps<{
   }
 }
 
+.ant-tabs-tab + .ant-tabs-tab {
+  @apply ml-4;
+}
+
 .nc-tabs {
   .ant-tabs-tab {
     @apply px-2 text-gray-600 !hover:text-gray-800;

packages/nc-gui/components/smartsheet/Details.vue

@@ -2,6 +2,8 @@
 const { openedViewsTab } = storeToRefs(useViewsStore())
 const { onViewsTabChange } = useViewsStore()
 
+const { isLeftSidebarOpen } = storeToRefs(useSidebarStore())
+
 const { isUIAllowed } = useRoles()
 
 const openedSubTab = computed({
@@ -30,8 +32,14 @@ watch(
 </script>
 
 <template>
-  <div class="flex flex-col h-full w-full" data-testid="nc-details-wrapper">
+  <div
-    <NcTabs v-model="openedSubTab" centered>
+    class="flex flex-col h-full w-full"
+    data-testid="nc-details-wrapper"
+    :class="{
+      'nc-details-tab-left-sidebar-close': !isLeftSidebarOpen,
+    }"
+  >
+    <NcTabs v-model:activeKey="openedSubTab" centered class="nc-details-tab">
       <a-tab-pane v-if="isUIAllowed('fieldAdd')" key="field">
         <template #tab>
           <div class="tab" data-testid="nc-fields-tab">
@@ -79,15 +87,25 @@ watch(
   @apply flex flex-row items-center gap-x-1.5 pr-0.5;
 }
 
-:deep(.nc-tabs.centered) {
+:deep(.ant-tabs-nav) {
+  min-height: calc(var(--topbar-height) - 1.75px);
+}
+</style>
+
+<style lang="scss">
+.nc-details-tab.nc-tabs.centered {
   > .ant-tabs-nav {
     .ant-tabs-nav-wrap {
-      @apply absolute mx-auto -left-1/8 right-0;
+      @apply absolute mx-auto -left-9.5;
     }
   }
 }
 
-:deep(.ant-tabs-nav) {
+.nc-details-tab-left-sidebar-close > .nc-details-tab.nc-tabs.centered {
-  min-height: calc(var(--topbar-height) - 1.75px);
+  > .ant-tabs-nav {
+    .ant-tabs-nav-wrap {
+      @apply absolute mx-auto left-0;
+    }
+  }
 }
 </style>