fix: moved toggle theme to different section

main area bg-surface-white

frontend/src/components/Layouts/DesktopLayout.vue

@@ -3,7 +3,7 @@
     <div class="h-full border-r bg-surface-menu-bar">
       <AppSidebar />
     </div>
-    <div class="flex-1 flex flex-col h-full overflow-auto">
+    <div class="flex-1 flex flex-col h-full overflow-auto bg-surface-white">
       <AppHeader />
       <slot />
     </div>

frontend/src/components/UserDropdown.vue

@@ -79,11 +79,6 @@ let dropdownOptions = ref([
       {
         component: markRaw(Apps),
       },
-      {
-        icon: computed(() => (theme.value === 'dark' ? 'sun' : 'moon')),
-        label: computed(() => __('Toggle theme')),
-        onClick: toggleTheme,
-      },
       {
         icon: 'life-buoy',
         label: computed(() => __('Support')),
@@ -100,6 +95,11 @@ let dropdownOptions = ref([
     group: 'Others',
     hideLabel: true,
     items: [
+      {
+        icon: computed(() => (theme.value === 'dark' ? 'moon' : 'sun')),
+        label: computed(() => __('Toggle theme')),
+        onClick: toggleTheme,
+      },
       {
         icon: 'credit-card',
         label: computed(() => __('Billing')),