From ab43b5e4214eece7ff9cc60add126ea5e24c5762 Mon Sep 17 00:00:00 2001
From: "Emanuel F." <70411130+efrancisworks@users.noreply.github.com>
Date: Thu, 10 Jul 2025 15:08:51 -0700
Subject: [PATCH] Menu bar mobile behavior change (#4312)

---
 src/constants/coreSettings.ts |  2 ++
 src/views/GraphView.vue       | 12 +++++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/constants/coreSettings.ts b/src/constants/coreSettings.ts
index a60dde91c..c3a9b30af 100644
--- a/src/constants/coreSettings.ts
+++ b/src/constants/coreSettings.ts
@@ -440,6 +440,8 @@ export const CORE_SETTINGS: SettingParams[] = [
     name: 'Use new menu',
     type: 'combo',
     options: ['Disabled', 'Top', 'Bottom'],
+    tooltip:
+      'Menu bar position. On mobile devices, the menu is always shown at the top.',
     migrateDeprecatedValue: (value: string) => {
       // Floating is now supported by dragging the docked actionbar off.
       if (value === 'Floating') {
diff --git a/src/views/GraphView.vue b/src/views/GraphView.vue
index 5d6719a48..f21cf1b61 100644
--- a/src/views/GraphView.vue
+++ b/src/views/GraphView.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="comfyui-body grid h-full w-full overflow-hidden">
     <div id="comfyui-body-top" class="comfyui-body-top">
-      <TopMenubar v-if="useNewMenu === 'Top'" />
+      <TopMenubar v-if="showTopMenu" />
     </div>
     <div id="comfyui-body-bottom" class="comfyui-body-bottom">
-      <TopMenubar v-if="useNewMenu === 'Bottom'" />
+      <TopMenubar v-if="showBottomMenu" />
     </div>
     <div id="comfyui-body-left" class="comfyui-body-left" />
     <div id="comfyui-body-right" class="comfyui-body-right" />
@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import { useEventListener } from '@vueuse/core'
+import { useBreakpoints, useEventListener } from '@vueuse/core'
 import type { ToastMessageOptions } from 'primevue/toast'
 import { useToast } from 'primevue/usetoast'
 import { computed, onBeforeUnmount, onMounted, watch, watchEffect } from 'vue'
@@ -70,6 +70,12 @@ const settingStore = useSettingStore()
 const executionStore = useExecutionStore()
 const colorPaletteStore = useColorPaletteStore()
 const queueStore = useQueueStore()
+const breakpoints = useBreakpoints({ md: 961 })
+const isMobile = breakpoints.smaller('md')
+const showTopMenu = computed(() => isMobile.value || useNewMenu.value === 'Top')
+const showBottomMenu = computed(
+  () => !isMobile.value && useNewMenu.value === 'Bottom'
+)
 
 watch(
   () => colorPaletteStore.completedActivePalette,