From 7e38f05650c4b01cd6db83a21ed55550e7efc19c Mon Sep 17 00:00:00 2001
From: elvira <elvira.lingris@gmail.com>
Date: Tue, 29 Sep 2026 19:16:07 +0300
Subject: [PATCH] product page: only show up down arrows when not all
 thumbnails are visible

---
 .../js/stimulus/product-gallery-controller.js   | 17 +++++++++++++++--
 resources/views/product/show.blade.php          |  6 ++++--
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/resources/js/stimulus/product-gallery-controller.js b/resources/js/stimulus/product-gallery-controller.js
index b16c080..c1663a4 100644
--- a/resources/js/stimulus/product-gallery-controller.js
+++ b/resources/js/stimulus/product-gallery-controller.js
@@ -3,20 +3,25 @@ import { Controller } from "@hotwired/stimulus";
 const SCROLL_STEP = 1;
 
 export default class extends Controller {
-    static targets = ["main", "thumb", "track", "lightbox", "lightboxImage", "lightboxCounter"];
+    static targets = ["main", "thumb", "track", "arrow", "lightbox", "lightboxImage", "lightboxCounter"];
 
     connect() {
         this.offset = 0;
         this.lightboxIndex = 0;
         this.#syncHeight();
 
-        this.mainTarget.addEventListener("load", () => this.#syncHeight());
+        // Main image and thumbnails resize as their images load and on viewport
+        // changes; re-sync the track height and arrow visibility each time.
+        this._resizeObserver = new ResizeObserver(() => this.#syncHeight());
+        this._resizeObserver.observe(this.mainTarget);
+        this.thumbTargets.forEach((t) => this._resizeObserver.observe(t));
 
         this._onKeydown = this.#handleKeydown.bind(this);
         document.addEventListener("keydown", this._onKeydown);
     }
 
     disconnect() {
+        this._resizeObserver?.disconnect();
         document.removeEventListener("keydown", this._onKeydown);
     }
 
@@ -103,6 +108,14 @@ export default class extends Controller {
         if (h > 0) {
             this.trackTarget.style.maxHeight = h + "px";
         }
+        this.#toggleArrows();
+    }
+
+    // Arrows stay in the layout (invisible, not hidden) so the thumbnail
+    // column keeps its alignment with the main image.
+    #toggleArrows() {
+        const overflowing = this.trackTarget.scrollHeight > this.trackTarget.clientHeight;
+        this.arrowTargets.forEach((a) => a.classList.toggle("invisible", !overflowing));
     }
 
     #handleKeydown(e) {
diff --git a/resources/views/product/show.blade.php b/resources/views/product/show.blade.php
index 284b7fd..82d1bc4 100644
--- a/resources/views/product/show.blade.php
+++ b/resources/views/product/show.blade.php
@@ -37,7 +37,8 @@ class="relative flex gap-4 items-start"
                         <button
                             type="button"
                             data-action="click->product-gallery#scrollUp"
-                            class="gallery-arrow w-full flex items-center justify-center py-2"
+                            data-product-gallery-target="arrow"
+                            class="gallery-arrow invisible w-full flex items-center justify-center py-2"
                             aria-label="Scroll thumbnails up"
                         ><x-ui.icon name="arrow-up" :size="30" /></button>
 
@@ -67,7 +68,8 @@ class="block w-full shrink-0 border border-black overflow-hidden "
                         <button
                             type="button"
                             data-action="click->product-gallery#scrollDown"
-                            class="gallery-arrow w-full flex items-center justify-center py-2"
+                            data-product-gallery-target="arrow"
+                            class="gallery-arrow invisible w-full flex items-center justify-center py-2"
                             aria-label="Scroll thumbnails down"
                         ><x-ui.icon name="arrow-down" :size="30" /></button>
                     </div>