Calculate the first/last media boxes in the row on every resize

src/content/listing.js

@@ -1,10 +1,13 @@
 import {createMaintenancePopup} from "$lib/components/MaintenancePopup.js";
 import {createMediaBoxTools} from "$lib/components/MediaBoxTools.js";
-import {initializeMediaBox} from "$lib/components/MediaBoxWrapper.js";
+import {calculateMediaBoxesPositions, initializeMediaBox} from "$lib/components/MediaBoxWrapper.js";
 import {createMaintenanceStatusIcon} from "$lib/components/MaintenanceStatusIcon.js";
 import {createImageShowFullscreenButton} from "$lib/components/ImageShowFullscreenButton.js";
 
-document.querySelectorAll('.media-box').forEach(mediaBoxElement => {
+/** @type {NodeListOf<HTMLElement>} */
+const mediaBoxes = document.querySelectorAll('.media-box');
+
+mediaBoxes.forEach(mediaBoxElement => {
   initializeMediaBox(mediaBoxElement, [
     createMediaBoxTools(
       createMaintenancePopup(),
@@ -18,3 +21,5 @@ document.querySelectorAll('.media-box').forEach(mediaBoxElement => {
     window.dispatchEvent(new CustomEvent('resize'));
   })
 });
+
+calculateMediaBoxesPositions(mediaBoxes);

src/lib/components/MediaBoxWrapper.js

@@ -78,6 +78,29 @@ export function initializeMediaBox(mediaBoxContainer, childComponentElements) {
   }
 }
 
+/**
+ * @param {NodeListOf<HTMLElement>} mediaBoxesList
+ */
+export function calculateMediaBoxesPositions(mediaBoxesList) {
+  window.addEventListener('resize', () => {
+    /** @type {HTMLElement|null} */
+    let lastMediaBox = null,
+      /** @type {number|null} */
+      lastMediaBoxPosition = null;
+
+    for (let mediaBoxElement of mediaBoxesList) {
+      const yPosition = mediaBoxElement.getBoundingClientRect().y;
+      const isOnTheSameLine = yPosition === lastMediaBoxPosition;
+
+      mediaBoxElement.classList.toggle('media-box--first', !isOnTheSameLine);
+      lastMediaBox?.classList.toggle('media-box--last', !isOnTheSameLine);
+
+      lastMediaBox = mediaBoxElement;
+      lastMediaBoxPosition = yPosition;
+    }
+  })
+}
+
 /**
  * @typedef {Object} ImageURIs
  * @property {string} full