From 03f597a496a9d9c11acacc54d5af18d792214749 Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Fri, 20 Feb 2026 02:12:19 -0800
Subject: [PATCH] fix: open minimap settings panel above on mobile (#8589)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

On mobile viewports, the minimap settings panel now opens above the
minimap instead of to the left, preventing it from extending off-screen
on narrow viewports.

<img width="918" height="974" alt="image"
src="https://github.com/user-attachments/assets/bd42fb38-207f-437e-86f3-65cd2eccc666"
/>

<img width="1074" height="970" alt="image"
src="https://github.com/user-attachments/assets/3fdd2109-a492-4570-a8ee-e67de171126b"
/>


## Changes

- Add mobile breakpoint detection using `useBreakpoints` from VueUse
- Use `flex-col-reverse` on mobile to position panel above the minimap
- Change margin from `mr-2` (right) to `mb-2` (bottom) on mobile

## Testing

- On desktop (≥768px width): Panel opens to the left of minimap
(unchanged)
- On mobile (<768px width): Panel opens above the minimap

## Related

- Fixes [Bug: Mobile minimap settings popover opens left instead of
up](https://www.notion.so/comfy-org/Bug-Mobile-minimap-settings-popover-opens-left-instead-of-up-2fc6d73d365081549a57c9132526edca)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Minimap now adapts layout between mobile and desktop for improved
usability.
* Panel spacing and alignment adjust automatically to better fit small
screens, improving readability and control placement.
* Responsive behavior provides a more consistent experience across
device sizes, with smoother transitions between compact (mobile) and
wide (desktop) layouts.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8589-fix-open-minimap-settings-panel-above-on-mobile-2fc6d73d365081ed8125c16051865c2b)
by [Unito](https://www.unito.io)
---
 src/renderer/extensions/minimap/MiniMap.vue      | 12 +++++++++++-
 src/renderer/extensions/minimap/MiniMapPanel.vue | 11 +++++++++--
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/renderer/extensions/minimap/MiniMap.vue b/src/renderer/extensions/minimap/MiniMap.vue
index 5df12291bf..090af13ca3 100644
--- a/src/renderer/extensions/minimap/MiniMap.vue
+++ b/src/renderer/extensions/minimap/MiniMap.vue
@@ -2,7 +2,12 @@
   <div
     v-if="visible && initialized"
     ref="minimapRef"
-    class="minimap-main-container absolute right-0 bottom-[54px] z-1000 flex"
+    :class="
+      cn(
+        'minimap-main-container absolute right-0 bottom-[54px] z-1000 flex',
+        isMobile ? 'flex-col' : 'flex-row'
+      )
+    "
   >
     <MiniMapPanel
       v-if="showOptionsPanel"
@@ -12,6 +17,7 @@
       :show-groups="showGroups"
       :render-bypass="renderBypass"
       :render-error="renderError"
+      :is-mobile="isMobile"
       @update-option="updateOption"
     />
 
@@ -70,14 +76,18 @@
 </template>
 
 <script setup lang="ts">
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
 import { onMounted, onUnmounted, ref, useTemplateRef } from 'vue'
 
 import Button from '@/components/ui/button/Button.vue'
 import { useMinimap } from '@/renderer/extensions/minimap/composables/useMinimap'
 import { useCommandStore } from '@/stores/commandStore'
+import { cn } from '@/utils/tailwindUtil'
 
 import MiniMapPanel from './MiniMapPanel.vue'
 
+const isMobile = useBreakpoints(breakpointsTailwind).smaller('md')
+
 const commandStore = useCommandStore()
 const minimapRef = ref<HTMLDivElement>()
 const containerRef = useTemplateRef<HTMLDivElement>('containerRef')
diff --git a/src/renderer/extensions/minimap/MiniMapPanel.vue b/src/renderer/extensions/minimap/MiniMapPanel.vue
index f32a7c3a31..8d3f97ed6c 100644
--- a/src/renderer/extensions/minimap/MiniMapPanel.vue
+++ b/src/renderer/extensions/minimap/MiniMapPanel.vue
@@ -1,6 +1,11 @@
 <template>
   <div
-    class="minimap-panel mr-2 flex flex-col gap-2 bg-comfy-menu-bg p-3 text-sm shadow-interface"
+    :class="
+      cn(
+        'minimap-panel flex flex-col gap-2 bg-comfy-menu-bg p-3 text-sm shadow-interface',
+        isMobile ? 'mb-2' : 'mr-2'
+      )
+    "
     :style="panelStyles"
   >
     <div class="flex items-center gap-2">
@@ -79,9 +84,10 @@
 
 <script setup lang="ts">
 import Checkbox from 'primevue/checkbox'
-import type { CSSProperties } from 'vue'
+import type { CSSProperties, Ref } from 'vue'
 
 import type { MinimapSettingsKey } from '@/renderer/extensions/minimap/types'
+import { cn } from '@/utils/tailwindUtil'
 
 defineProps<{
   panelStyles: CSSProperties
@@ -90,6 +96,7 @@ defineProps<{
   showGroups: boolean
   renderBypass: boolean
   renderError: boolean
+  isMobile: Ref<boolean> | boolean
 }>()
 
 defineEmits<{