From 5b7d5adb5d620274eced46c23d93067a902dcb54 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Mon, 2 Oct 2023 11:43:01 +0000
Subject: [PATCH] fix: Fixed details tab

---
 packages/nc-gui/components/nc/Tabs.vue        |  4 +++
 .../nc-gui/components/smartsheet/Details.vue  | 30 +++++++++++++++----
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/nc/Tabs.vue b/packages/nc-gui/components/nc/Tabs.vue
index de6d432d98..08647e7dc9 100644
--- a/packages/nc-gui/components/nc/Tabs.vue
+++ b/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;
diff --git a/packages/nc-gui/components/smartsheet/Details.vue b/packages/nc-gui/components/smartsheet/Details.vue
index 7b6975c953..c206ae2827 100644
--- a/packages/nc-gui/components/smartsheet/Details.vue
+++ b/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">
-    <NcTabs v-model="openedSubTab" centered>
+  <div
+    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) {
-  min-height: calc(var(--topbar-height) - 1.75px);
+.nc-details-tab-left-sidebar-close > .nc-details-tab.nc-tabs.centered {
+  > .ant-tabs-nav {
+    .ant-tabs-nav-wrap {
+      @apply absolute mx-auto left-0;
+    }
+  }
 }
 </style>