fix: design corrections

packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue

@@ -524,7 +524,7 @@ watch(
 )
 
 const openBaseSettings = async (baseId: string) => {
-  await navigateTo(`/nc/${baseId}?page=base-settings&tab=visibility`)
+  await navigateTo(`/nc/${baseId}?page=base-settings`)
 }
 
 const showNodeTooltip = ref(true)

packages/nc-gui/components/dashboard/settings/BaseSettings.vue

@@ -3,18 +3,23 @@ const { isUIAllowed } = useRoles()
 
 const hasPermissionForSnapshots = computed(() => isUIAllowed('manageSnapshot'))
 
+const router = useRouter()
+
 const activeMenu = ref(isEeUI && hasPermissionForSnapshots.value ? 'snapshots' : 'visibility')
 
 const selectMenu = (option: string) => {
   if (!hasPermissionForSnapshots.value && option === 'snapshots') {
     return
   }
-
+  router.push({
+    query: {
+      ...router.currentRoute.value.query,
+      tab: option,
+    },
+  })
   activeMenu.value = option
 }
 
-const router = useRouter()
-
 onMounted(() => {
   const query = router.currentRoute.value.query
   if (query && query.tab && ['snapshots', 'visibility'].includes(query.tab as string)) {

packages/nc-gui/components/dashboard/settings/BaseSettings/Visibility.vue

@@ -59,38 +59,39 @@ async function showNullAndEmptyInFilterOnChange(evt: boolean) {
 
     <div class="flex flex-col border-1 rounded-lg mt-6 border-nc-border-gray-medium">
       <div class="flex w-full px-3 py-2 gap-2 flex-col">
-        <div class="flex w-full items-center">
+        <div class="flex w-full gap-3 items-center">
+          <NcSwitch v-model:checked="includeM2M" v-e="['c:themes:show-m2m-tables']" class="nc-settings-meta-misc-m2m ml-2" />
+
           <span class="text-nc-content-gray font-semibold flex-1">
             {{ $t('msg.info.showM2mTables') }}
           </span>
-          <NcSwitch v-model:checked="includeM2M" v-e="['c:themes:show-m2m-tables']" class="nc-settings-meta-misc-m2m ml-2" />
         </div>
-        <span class="text-gray-500">{{ $t('msg.info.showM2mTablesDesc') }}</span>
+        <span class="text-gray-500 pl-10">{{ $t('msg.info.showM2mTablesDesc') }}</span>
       </div>
 
       <div class="flex w-full px-3 border-t-1 border-nc-border-gray-medium py-2 gap-2 flex-col">
-        <div class="flex w-full items-center">
+        <div class="flex w-full gap-3 items-center">
+          <NcSwitch v-model:checked="showNull" v-e="['c:settings:show-null']" class="ml-2 nc-settings-show-null" />
           <span class="text-nc-content-gray font-semibold flex-1">
             {{ $t('msg.info.showNullInCells') }}
           </span>
-          <NcSwitch v-model:checked="showNull" v-e="['c:settings:show-null']" class="ml-2 nc-settings-show-null" />
         </div>
-        <span class="text-gray-500">{{ $t('msg.info.showNullInCellsDesc') }}</span>
+        <span class="text-gray-500 pl-10">{{ $t('msg.info.showNullInCellsDesc') }}</span>
       </div>
 
       <div class="flex w-full px-3 py-2 border-t-1 border-nc-border-gray-medium gap-2 flex-col">
-        <div class="flex w-full items-center">
-          <span class="text-nc-content-gray font-semibold flex-1">
-            {{ $t('msg.info.showNullAndEmptyInFilter') }}
-          </span>
+        <div class="flex w-full gap-3 items-center">
           <NcSwitch
             v-model:checked="showNullAndEmptyInFilter"
             v-e="['c:settings:show-null-and-empty-in-filter']"
             class="ml-2 nc-settings-show-null-and-empty-in-filter"
             @change="showNullAndEmptyInFilterOnChange"
           />
+          <span class="text-nc-content-gray font-semibold flex-1">
+            {{ $t('msg.info.showNullAndEmptyInFilter') }}
+          </span>
         </div>
-        <span class="text-gray-500">{{ $t('msg.info.showNullAndEmptyInFilterDesc') }}</span>
+        <span class="text-gray-500 pl-10">{{ $t('msg.info.showNullAndEmptyInFilterDesc') }}</span>
       </div>
     </div>
   </div>