From b3594d3f78b02ccf70dbd18bd22d4bf03de8edef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Thu, 28 May 2026 14:29:26 +0200
Subject: [PATCH] Make VSF cards wrap by available width with per-card overlay
 stage

---
 patterns/vsf-listen-uebersicht-seite-v2.html | 84 ++++++++++----------
 1 file changed, 43 insertions(+), 41 deletions(-)

diff --git a/patterns/vsf-listen-uebersicht-seite-v2.html b/patterns/vsf-listen-uebersicht-seite-v2.html
index aa78118..18925a7 100644
--- a/patterns/vsf-listen-uebersicht-seite-v2.html
+++ b/patterns/vsf-listen-uebersicht-seite-v2.html
@@ -111,8 +111,9 @@
       </div>
     </div>
 
-    <div class="sg-object-card-grid sg-delete-confirmation-pattern sg-delete-confirmation-pattern__stage sg-vsf-list-card-context" data-pattern="overlay-card" data-dialog-open="false" aria-label="VSF List Card Layout List Card">
-      <article class="sg-card sg-object-card sg-delete-confirmation-pattern__target" data-pattern="object-group-card" aria-label="List Card">
+    <div class="sg-object-card-grid" aria-label="VSF Listen Cards Übersicht">
+      <div class="sg-object-card sg-delete-confirmation-pattern sg-delete-confirmation-pattern__stage sg-vsf-list-card-context" data-pattern="overlay-card" data-dialog-open="false" aria-label="VSF List Card Layout List Card">
+      <article class="sg-card sg-delete-confirmation-pattern__target" data-pattern="object-group-card" aria-label="List Card">
         <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header">
           <div class="sg-strong">NAME DER LISTE</div>
           <div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
@@ -190,6 +191,46 @@
         </footer>
       </article>
 
+      <article class="sg-card sg-delete-confirmation-pattern__floating-card" aria-label="Liste editieren" role="dialog" aria-modal="true" aria-labelledby="vsf-list-card-inline-edit-title" data-overlay-dialog="edit" hidden>
+        <div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
+          <p class="sg-body sg-delete-confirmation-pattern__text" id="vsf-list-card-inline-edit-title"><strong>Liste editieren</strong></p>
+          <div class="sg-form-sections-card__field-group">
+            <label class="sg-labeled-input-row">
+              <span class="sg-label">Name</span>
+              <input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" value="NAME DER LISTE" aria-label="Name" data-vsf-edit-input>
+            </label>
+            <label class="sg-labeled-input-row">
+              <span class="sg-label">Beschreibung</span>
+              <textarea class="sg-input-multi-line sg-form-inactive-selectable" rows="4" aria-label="Beschreibung" data-vsf-edit-input>BESCHREIBUNG LISTE</textarea>
+            </label>
+          </div>
+          <div class="sg-delete-confirmation-pattern__actions">
+            <button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Abbrechen</button>
+            <button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="button" disabled aria-disabled="true" data-vsf-edit-save>
+              Speichern
+            </button>
+          </div>
+        </div>
+      </article>
+
+      <article class="sg-card sg-delete-confirmation-pattern__floating-card" aria-label="Löschbestätigung" role="dialog" aria-modal="true" aria-labelledby="vsf-list-card-inline-delete-title" data-overlay-dialog="delete" hidden>
+        <div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
+          <p class="sg-body sg-delete-confirmation-pattern__text" id="vsf-list-card-inline-delete-title"><strong>Möchtest du NAME DER LISTE wirklich löschen?</strong></p>
+          <p class="sg-body sg-delete-confirmation-pattern__text">Du kannst das nicht rückgängig machen. Bestätige durch Eingabe von <span class="sg-delete-confirmation-pattern__code">DELETE</span>.</p>
+          <label class="sg-labeled-input-row sg-delete-confirmation-pattern__input-row">
+            <span class="sg-label">Bestätigung</span>
+            <input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" placeholder="DELETE" aria-label="Löschbestätigung durch DELETE" data-vsf-delete-confirmation-input>
+          </label>
+          <div class="sg-delete-confirmation-pattern__actions">
+            <button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Abbrechen</button>
+            <button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="button" disabled aria-disabled="true" data-vsf-delete-confirmation-submit>
+              Löschen
+            </button>
+          </div>
+        </div>
+      </article>
+      </div>
+
       <article class="sg-card sg-object-card" data-pattern="object-group-card" aria-label="Neue Liste anlegen Karte">
         <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header">
           <div class="sg-strong">Neue Liste anlegen</div>
@@ -251,45 +292,6 @@
           </div>
         </div>
       </article>
-
-      <article class="sg-card sg-delete-confirmation-pattern__floating-card" aria-label="Liste editieren" role="dialog" aria-modal="true" aria-labelledby="vsf-list-card-inline-edit-title" data-overlay-dialog="edit" hidden>
-        <div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
-          <p class="sg-body sg-delete-confirmation-pattern__text" id="vsf-list-card-inline-edit-title"><strong>Liste editieren</strong></p>
-          <div class="sg-form-sections-card__field-group">
-            <label class="sg-labeled-input-row">
-              <span class="sg-label">Name</span>
-              <input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" value="NAME DER LISTE" aria-label="Name" data-vsf-edit-input>
-            </label>
-            <label class="sg-labeled-input-row">
-              <span class="sg-label">Beschreibung</span>
-              <textarea class="sg-input-multi-line sg-form-inactive-selectable" rows="4" aria-label="Beschreibung" data-vsf-edit-input>BESCHREIBUNG LISTE</textarea>
-            </label>
-          </div>
-          <div class="sg-delete-confirmation-pattern__actions">
-            <button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Abbrechen</button>
-            <button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="button" disabled aria-disabled="true" data-vsf-edit-save>
-              Speichern
-            </button>
-          </div>
-        </div>
-      </article>
-
-      <article class="sg-card sg-delete-confirmation-pattern__floating-card" aria-label="Löschbestätigung" role="dialog" aria-modal="true" aria-labelledby="vsf-list-card-inline-delete-title" data-overlay-dialog="delete" hidden>
-        <div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
-          <p class="sg-body sg-delete-confirmation-pattern__text" id="vsf-list-card-inline-delete-title"><strong>Möchtest du NAME DER LISTE wirklich löschen?</strong></p>
-          <p class="sg-body sg-delete-confirmation-pattern__text">Du kannst das nicht rückgängig machen. Bestätige durch Eingabe von <span class="sg-delete-confirmation-pattern__code">DELETE</span>.</p>
-          <label class="sg-labeled-input-row sg-delete-confirmation-pattern__input-row">
-            <span class="sg-label">Bestätigung</span>
-            <input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" placeholder="DELETE" aria-label="Löschbestätigung durch DELETE" data-vsf-delete-confirmation-input>
-          </label>
-          <div class="sg-delete-confirmation-pattern__actions">
-            <button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Abbrechen</button>
-            <button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="button" disabled aria-disabled="true" data-vsf-delete-confirmation-submit>
-              Löschen
-            </button>
-          </div>
-        </div>
-      </article>
     </div>
 
     <main class="sg-vsf-list-overview-page-v2__content" aria-label="Inhaltsbereich">