From a1d689d3b3a90090048b04a805f8e1f0a0182786 Mon Sep 17 00:00:00 2001
From: Terry Jia <terryjia88@gmail.com>
Date: Wed, 7 Jan 2026 20:42:44 -0500
Subject: [PATCH] fix: wrap image preview navigation dots when overflowing node
 width (#7891)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

When Preview Image node has many images, the navigation dots would
overflow beyond the node boundaries. Adding flex-wrap ensures dots wrap
to multiple lines instead of overflowing.

## Screenshots
before
<img width="1175" height="1357" alt="image"
src="https://github.com/user-attachments/assets/1903ae13-c304-4c75-a947-aa879ef9c2e1"
/>

after
<img width="654" height="840" alt="image"
src="https://github.com/user-attachments/assets/37012379-b72f-4b7d-9355-08bac11b094b"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7891-fix-wrap-image-preview-navigation-dots-when-overflowing-node-width-2e26d73d36508130a5edf0a0d34f966c)
by [Unito](https://www.unito.io)
---
 src/renderer/extensions/vueNodes/components/ImagePreview.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/renderer/extensions/vueNodes/components/ImagePreview.vue b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
index 538a5a5d34..a8b0908c1d 100644
--- a/src/renderer/extensions/vueNodes/components/ImagePreview.vue
+++ b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
@@ -99,7 +99,10 @@
       </span>
     </div>
     <!-- Multiple Images Navigation -->
-    <div v-if="hasMultipleImages" class="flex justify-center gap-1 pt-4">
+    <div
+      v-if="hasMultipleImages"
+      class="flex flex-wrap justify-center gap-1 pt-4"
+    >
       <button
         v-for="(_, index) in imageUrls"
         :key="index"