From e05db71b331dd9018cd53294abeb5c8b50b33373 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Thu, 28 May 2026 10:56:54 +0200
Subject: [PATCH] Add object card shared-width row logic to VSF detail page

---
 patterns/vsf-list-detailseite.html | 32 ++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/patterns/vsf-list-detailseite.html b/patterns/vsf-list-detailseite.html
index bddca0a..5846724 100644
--- a/patterns/vsf-list-detailseite.html
+++ b/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>