product page: only show up down arrows when not all thumbnails are visible

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) {