Nc Fix: header ui changes (#9279)

* fix(nc-gui): add bottom border for integration, team 7 settings header

* fix(nc-gui): update max content width

* chore(nc-gui): lint

packages/nc-gui/components/account/AppStore.vue

@@ -10,7 +10,7 @@
         </span>
       </template>
     </NcPageHeader>
-    <div class="p-6 h-[calc(100vh_-_100px)] border-t-1 border-gray-200 flex flex-col gap-6 overflow-auto nc-scrollbar-thin">
+    <div class="nc-content-max-w p-6 h-[calc(100vh_-_100px)] flex flex-col gap-6 overflow-auto nc-scrollbar-thin">
       <div>
         <LazyDashboardSettingsAppStore />
       </div>

packages/nc-gui/components/account/Profile.vue

@@ -72,7 +72,7 @@ const onValidate = async (_: any, valid: boolean) => {
         </span>
       </template>
     </NcPageHeader>
-    <div class="p-6 h-[calc(100vh_-_100px)] border-t-1 border-gray-200 flex flex-col gap-6 overflow-auto nc-scrollbar-thin">
+    <div class="nc-content-max-w p-6 h-[calc(100vh_-_100px)] flex flex-col gap-6 overflow-auto nc-scrollbar-thin">
       <div class="flex flex-col w-150 mx-auto">
         <div class="mt-5 flex flex-col border-1 rounded-2xl border-gray-200 p-6 gap-y-2">
           <div class="flex font-medium text-base" data-rec="true">{{ $t('labels.accountDetails') }}</div>

packages/nc-gui/components/account/ResetPassword.vue

@@ -68,7 +68,7 @@ const resetError = () => {
         </span>
       </template>
     </NcPageHeader>
-    <div class="p-6 h-[calc(100vh_-_100px)] border-t-1 border-gray-200 flex flex-col gap-6 overflow-auto nc-scrollbar-thin">
+    <div class="nc-content-max-w p-6 h-[calc(100vh_-_100px)] flex flex-col gap-6 overflow-auto nc-scrollbar-thin">
       <div class="mx-auto relative flex flex-col justify-start gap-2 w-full md:(bg-white) max-w-[900px]">
         <a-form
           ref="formValidator"

packages/nc-gui/components/account/SignupSettings.vue

@@ -40,7 +40,7 @@ loadSettings()
         </span>
       </template>
     </NcPageHeader>
-    <div class="p-6 h-[calc(100vh_-_100px)] border-t-1 border-gray-200 flex flex-col gap-6 overflow-auto nc-scrollbar-thin">
+    <div class="nc-content-max-w p-6 h-[calc(100vh_-_100px)] flex flex-col gap-6 overflow-auto nc-scrollbar-thin">
       <div class="flex flex-col items-center">
         <div class="flex items-center gap-2">
           <a-form-item>

packages/nc-gui/components/account/Token.vue

@@ -235,7 +235,7 @@ const handleCancel = () => {
         </span>
       </template>
     </NcPageHeader>
-    <div class="p-6 h-[calc(100vh_-_100px)] border-t-1 border-gray-200 flex flex-col gap-6 overflow-auto nc-scrollbar-thin">
+    <div class="nc-content-max-w p-6 h-[calc(100vh_-_100px)] flex flex-col gap-6 overflow-auto nc-scrollbar-thin">
       <div class="max-w-202 mx-auto h-full w-full" data-testid="nc-token-list">
         <div class="flex gap-4 items-baseline justify-between">
           <h6 class="text-xl text-left font-bold my-0" data-rec="true">{{ $t('title.apiTokens') }}</h6>

packages/nc-gui/components/account/UserList.vue

@@ -222,7 +222,7 @@ const columns = [
         </span>
       </template>
     </NcPageHeader>
-    <div class="p-6 h-[calc(100vh_-_100px)] border-t-1 border-gray-200 flex flex-col gap-6 overflow-auto nc-scrollbar-thin">
+    <div class="nc-content-max-w p-6 h-[calc(100vh_-_100px)] flex flex-col gap-6 overflow-auto nc-scrollbar-thin">
       <div class="h-full">
         <div class="max-w-195 mx-auto h-full">
           <div class="flex gap-4 items-center justify-between">

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

@@ -1,7 +1,19 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+interface Props {
+  bottomBorder?: boolean
+}
+withDefaults(defineProps<Props>(), {
+  bottomBorder: true,
+})
+</script>
 
 <template>
-  <div class="nc-page-header">
+  <div
+    class="nc-page-header"
+    :class="{
+      'border-b-1 border-gray-200': bottomBorder,
+    }"
+  >
     <div class="flex-1 flex items-start gap-3">
       <div v-if="$slots.icon" class="h-7 flex items-center children:flex-none">
         <slot name="icon"></slot>

packages/nc-gui/components/project/AccessSettings.vue

@@ -274,7 +274,7 @@ const isDeleteOrUpdateAllowed = (user) => {
         <GeneralIcon icon="ncSlash1" class="nc-breadcrumb-divider" />
         <NuxtLink
           :href="`/admin/${orgId}/bases`"
-          class="!hover:(text-gray-800 underline-gray-600) flex items-center !text-gray-700 !underline-transparent ml-0.75 max-w-1/4"
+          class="!hover:(text-gray-800 underline-gray-600) flex items-center !text-gray-700 !underline-transparent max-w-1/4"
         >
           <div class="nc-breadcrumb-item">
             {{ $t('objects.projects') }}
@@ -299,12 +299,7 @@ const isDeleteOrUpdateAllowed = (user) => {
       </NcPageHeader>
     </div>
 
-    <div
-      class="h-full flex flex-col items-center gap-6 px-6 pt-6"
-      :class="{
-        'border-t-1 border-gray-200': isAdminPanel,
-      }"
-    >
+    <div class="nc-content-max-w h-full flex flex-col items-center gap-6 px-6 pt-6">
       <div v-if="!isAdminPanel" class="w-full flex justify-between items-center max-w-350 gap-3">
         <a-input
           v-model:value="userSearchText"

packages/nc-gui/components/project/View.vue

@@ -130,7 +130,7 @@ watch(
       <LazyGeneralShareProject />
     </div>
     <div
-      class="flex nc-base-view-tab container"
+      class="flex nc-base-view-tab"
       :style="{
         height: 'calc(100% - var(--topbar-height))',
       }"
@@ -217,6 +217,9 @@ watch(
 :deep(.ant-tabs-tab) {
   @apply pt-2 pb-3;
 }
+:deep(.ant-tabs-content) {
+  @apply nc-content-max-w;
+}
 :deep(.ant-tabs-tab .tab-title) {
   @apply text-gray-500;
 }

packages/nc-gui/components/workspace/AuditLogs.vue

@@ -209,10 +209,7 @@ onKeyStroke('ArrowDown', onDown)
         </span>
       </template>
     </NcPageHeader>
-    <div
-      class="flex flex-col"
-      :class="{ 'gap-6 p-6 border-t-1 border-gray-200 h-[calc(100vh_-_100px)]': !baseId, 'gap-4 h-full': baseId }"
-    >
+    <div class="nc-content-max-w flex flex-col" :class="{ 'gap-6 p-6 h-[calc(100vh_-_100px)]': !baseId, 'gap-4 h-full': baseId }">
       <div v-if="!appInfo.auditEnabled" class="text-red-500">Audit logs are currently disabled by administrators.</div>
 
       <div class="flex flex-col" :class="{ 'gap-6': !baseId, 'gap-4': baseId }">

packages/nc-gui/components/workspace/View.vue

@@ -68,9 +68,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <div v-if="currentWorkspace" class="flex w-full max-w-[97.5rem] flex-col nc-workspace-settings">
-    <div v-if="!props.workspaceId" class="min-w-0 pt-2 px-2">
-      <div class="nc-breadcrumb nc-workspace-title">
+  <div v-if="currentWorkspace" class="flex w-full flex-col nc-workspace-settings">
+    <div v-if="!props.workspaceId" class="min-w-0 p-2 h-[var(--topbar-height)] border-b-1 border-gray-200">
+      <div class="nc-breadcrumb nc-no-negative-margin pl-1 nc-workspace-title">
         <div class="nc-breadcrumb-item capitalize">
           {{ currentWorkspace?.title }}
         </div>
@@ -90,7 +90,7 @@ onMounted(() => {
 
         <NuxtLink
           :href="`/admin/${orgId}/workspaces`"
-          class="!hover:(text-gray-800 underline-gray-600) flex items-center !text-gray-700 !underline-transparent ml-0.75 max-w-1/4"
+          class="!hover:(text-gray-800 underline-gray-600) flex items-center !text-gray-700 !underline-transparent max-w-1/4"
         >
           <div class="nc-breadcrumb-item">
             {{ $t('labels.workspaces') }}
@@ -123,7 +123,7 @@ onMounted(() => {
       <template v-if="isUIAllowed('workspaceCollaborators')">
         <a-tab-pane key="collaborators" class="w-full">
           <template #tab>
-            <div class="flex flex-row items-center pb-1 pt-2 gap-x-1.5">
+            <div class="tab-title">
               <GeneralIcon icon="users" class="!h-3.5 !w-3.5" />
               Members
             </div>
@@ -135,7 +135,7 @@ onMounted(() => {
       <template v-if="isUIAllowed('workspaceManage')">
         <a-tab-pane key="settings" class="w-full">
           <template #tab>
-            <div class="flex flex-row items-center pb-1 pt-2 gap-x-1.5" data-testid="nc-workspace-settings-tab-settings">
+            <div class="tab-title" data-testid="nc-workspace-settings-tab-settings">
               <GeneralIcon icon="settings" />
               Settings
             </div>
@@ -147,7 +147,7 @@ onMounted(() => {
       <template v-if="isUIAllowed('workspaceAuditList') && !props.workspaceId">
         <a-tab-pane key="audit" class="w-full">
           <template #tab>
-            <div class="flex flex-row items-center pb-1 pt-2 gap-x-1.5">
+            <div class="tab-title">
               <GeneralIcon icon="audit" class="!h-3.5 !w-3.5" />
               Audit Logs
             </div>
@@ -174,17 +174,19 @@ onMounted(() => {
 :deep(.ant-tabs-nav) {
   @apply !pl-0;
 }
-
-:deep(.ant-tabs-nav-list) {
-  @apply !gap-5;
-}
 :deep(.ant-tabs-tab) {
-  @apply !pt-0 !pb-2.5 !ml-0;
+  @apply pt-2 pb-3;
 }
-.ant-tabs-content {
-  @apply !h-full;
+:deep(.ant-tabs-content) {
+  @apply nc-content-max-w;
 }
 .ant-tabs-content-top {
   @apply !h-full;
 }
+.tab-info {
+  @apply flex pl-1.25 px-1.5 py-0.75 rounded-md text-xs;
+}
+.tab-title {
+  @apply flex flex-row items-center gap-x-2 py-[1px];
+}
 </style>

packages/nc-gui/components/workspace/integrations/view.vue

@@ -46,9 +46,9 @@ onBeforeMount(() => {
 </script>
 
 <template>
-  <div v-if="currentWorkspace" class="flex w-full max-w-[97.5rem] flex-col nc-workspace-integrations">
-    <div class="flex gap-2 items-center min-w-0 pt-2 px-2">
-      <div class="nc-breadcrumb">
+  <div v-if="currentWorkspace" class="flex w-full flex-col nc-workspace-integrations">
+    <div class="flex gap-2 items-center min-w-0 p-2 h-[var(--topbar-height)] border-b-1 border-gray-200">
+      <div class="nc-breadcrumb nc-no-negative-margin pl-1">
         <div class="nc-breadcrumb-item capitalize">
           {{ currentWorkspace?.title }}
         </div>
@@ -58,7 +58,6 @@ onBeforeMount(() => {
         </h1>
       </div>
     </div>
-
     <NcTabs v-model:activeKey="activeViewTab">
       <template #leftExtra>
         <div class="w-3"></div>
@@ -66,7 +65,7 @@ onBeforeMount(() => {
       <template v-if="isUIAllowed('workspaceIntegrations')">
         <a-tab-pane key="integrations" class="w-full">
           <template #tab>
-            <div class="flex flex-row items-center pb-1 pt-2 gap-x-1.5" data-testid="nc-workspace-settings-tab-integrations">
+            <div class="tab-title" data-testid="nc-workspace-settings-tab-integrations">
               <GeneralIcon icon="integration" />
               {{ $t('general.integrations') }}
             </div>
@@ -79,7 +78,7 @@ onBeforeMount(() => {
       <template v-if="isUIAllowed('workspaceIntegrations')">
         <a-tab-pane key="connections" class="w-full">
           <template #tab>
-            <div class="flex flex-row items-center pb-1 pt-2 gap-x-1.5" data-testid="nc-workspace-settings-tab-integrations">
+            <div class="tab-title" data-testid="nc-workspace-settings-tab-integrations">
               <GeneralIcon icon="gitCommit" />
               {{ $t('general.connections') }}
               <div
@@ -117,15 +116,11 @@ onBeforeMount(() => {
 :deep(.ant-tabs-nav) {
   @apply !pl-0;
 }
-
-:deep(.ant-tabs-nav-list) {
-  @apply !gap-5;
-}
 :deep(.ant-tabs-tab) {
-  @apply !pt-0 !pb-2.5 !ml-0;
+  @apply pt-2 pb-3;
 }
-.ant-tabs-content {
-  @apply !h-full;
+:deep(.ant-tabs-content) {
+  @apply nc-content-max-w;
 }
 .ant-tabs-content-top {
   @apply !h-full;
@@ -133,4 +128,7 @@ onBeforeMount(() => {
 .tab-info {
   @apply flex pl-1.25 px-1.5 py-0.75 rounded-md text-xs;
 }
+.tab-title {
+  @apply flex flex-row items-center gap-x-2 py-[1px];
+}
 </style>

packages/nc-gui/pages/account/index.vue

@@ -40,20 +40,22 @@ const logout = async () => {
               class="tabs-menu h-full"
               mode="inline"
             >
-              <NcButton
-                v-if="!$route.params.baseType"
-                v-e="['c:navbar:home']"
-                type="text"
-                size="small"
-                class="transition-all duration-200 mx-2 my-2.5 cursor-pointer transform hover:bg-gray-100 nc-noco-brand-icon"
-                data-testid="nc-noco-brand-icon"
-                @click="navigateTo('/')"
-              >
-                <div class="flex flex-row gap-x-2 items-center">
-                  <GeneralIcon icon="ncArrowLeft" />
-                  <div class="flex text-small leading-[18px] font-semibold">{{ $t('labels.back') }}</div>
-                </div>
-              </NcButton>
+              <div class="h-[var(--topbar-height)] flex items-center children:flex-none">
+                <NcButton
+                  v-if="!$route.params.baseType"
+                  v-e="['c:navbar:home']"
+                  type="text"
+                  size="small"
+                  class="transition-all duration-200 mx-2 cursor-pointer transform hover:bg-gray-100 nc-noco-brand-icon"
+                  data-testid="nc-noco-brand-icon"
+                  @click="navigateTo('/')"
+                >
+                  <div class="flex flex-row gap-x-2 items-center">
+                    <GeneralIcon icon="ncArrowLeft" />
+                    <div class="flex text-small leading-[18px] font-semibold">{{ $t('labels.back') }}</div>
+                  </div>
+                </NcButton>
+              </div>
               <NcDivider class="!mt-0" />
 
               <div class="text-sm text-gray-500 font-semibold ml-4 py-1.5 mt-2">{{ $t('labels.account') }}</div>
@@ -203,7 +205,7 @@ const logout = async () => {
               </template>
             </div>
             <div
-              class="flex flex-col w-full max-w-[97.5rem]"
+              class="flex flex-col w-full"
               :style="{
                 height: 'calc(100vh - 3.5rem)',
               }"

packages/nc-gui/windi.config.ts

@@ -58,6 +58,7 @@ export default defineConfig({
     'scrollbar-thin-dull': 'scrollbar scrollbar-thin scrollbar-thumb-rounded-md scrollbar-thumb-gray-100 scrollbar-track-white',
     'nc-scrollbar-thin':
       'scrollbar scrollbar-thin scrollbar-thumb-gray-200 hover:scrollbar-thumb-gray-300 scrollbar-track-transparent',
+    'nc-content-max-w': 'max-w-[97.5rem]',
   },
 
   theme: {