Add object card shared-width row logic to VSF detail page

patterns/vsf-list-detailseite.html

@@ -249,6 +249,35 @@
 
   <script src="../scripts/help-icon-overlays.js"></script>
   <script>
+    const updateObjectCardGridRowState = () => {
+      document.querySelectorAll('.sg-object-card-grid').forEach((grid) => {
+        const cards = Array.from(grid.querySelectorAll('.sg-object-card'));
+        grid.classList.remove('sg-object-card-grid--multi-row');
+        grid.style.removeProperty('--layout-object-card-shared-width');
+
+        if (cards.length <= 1) {
+          return;
+        }
+
+        const firstTop = cards[0].offsetTop;
+        const hasMultipleRows = cards.some((card) => card.offsetTop !== firstTop);
+
+        if (!hasMultipleRows) {
+          return;
+        }
+
+        const firstRowCards = cards.filter((card) => card.offsetTop === firstTop);
+        const referenceCard = firstRowCards[0];
+        if (!referenceCard) {
+          return;
+        }
+
+        const referenceWidth = referenceCard.getBoundingClientRect().width;
+        grid.style.setProperty('--layout-object-card-shared-width', `${referenceWidth}px`);
+        grid.classList.add('sg-object-card-grid--multi-row');
+      });
+    };
+
     document.querySelectorAll('.sg-portal-header__tabs').forEach((group) => {
       group.querySelectorAll('.sg-tab-button').forEach((button) => {
         button.addEventListener('click', () => {
@@ -444,6 +473,9 @@
         });
       }
     });
+
+    window.addEventListener('load', updateObjectCardGridRowState);
+    window.addEventListener('resize', updateObjectCardGridRowState);
   </script>
 
 </body>