From e35643c2704e3a71144ece6000b6c32da1e0591d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Mon, 15 Jun 2026 10:35:32 +0200
Subject: [PATCH] Adjust overlay card vertical behavior

---
 foundations.html                           | 2 ++
 semantic-tokens-patterns.html              | 3 ++-
 styles/01-foundations.css                  | 3 ++-
 styles/27-patterns-delete-confirmation.css | 7 +++++--
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/foundations.html b/foundations.html
index 735cb29..79eb4f1 100644
--- a/foundations.html
+++ b/foundations.html
@@ -158,6 +158,8 @@
         <tr><td>object-group-card-min-width</td><td>450px</td><td>Mindestbreite der Group Card im Pattern Object Group Card.</td></tr>
         <tr><td>object-group-card-max-width</td><td>650px</td><td>Maximale Breite der Group Card im Pattern Object Group Card.</td></tr>
         <tr><td>object-group-card-height</td><td>700px</td><td>Fixe Desktop-Höhe der Group Card im Pattern Object Group Card.</td></tr>
+        <tr><td>delete-confirmation-overlay-offset-block-start</td><td>10%</td><td>Vertikaler Abstand des Overlays vom oberen Rand des Zielobjekts, relativ zur Objektgröße.</td></tr>
+        <tr><td>delete-confirmation-overlay-max-height</td><td>calc(100vh - 10vh)</td><td>Maximalhöhe des Overlays relativ zum Viewport; danach scrollt der Inhalt innerhalb des Overlays.</td></tr>
         <tr><td>notifications-card-min-width</td><td>445px</td><td>Mindestbreite der Notification Card im Pattern Notifications; 50px größer als die Object Card und Grundlage für Flex-Basis und Mindestbreite des Patterns.</td></tr>
         <tr><td>search-field-width</td><td>15.3rem</td><td>Fixe Breite des Suchfeld-Inputs inklusive Clear-Button-Bereich.</td></tr>
         <tr><td>layer-pulldown-panel</td><td>40</td><td>Layer-Stufe für geöffnete Pulldown-Ausklappfelder, damit sie über anderen Inhalten liegen.</td></tr>
diff --git a/semantic-tokens-patterns.html b/semantic-tokens-patterns.html
index 2f46f10..b4d466c 100644
--- a/semantic-tokens-patterns.html
+++ b/semantic-tokens-patterns.html
@@ -116,7 +116,8 @@
       <tr><td>text-delete-confirmation-overlay</td><td>color-font-dark</td><td>Textfarbe im Bestätigungsfenster.</td></tr>
       <tr><td>layout-delete-confirmation-target-max-width</td><td>35rem</td><td>Maximalbreite der abgedunkelten Ziel-Card in der Pattern-Demo.</td></tr>
       <tr><td>layout-delete-confirmation-overlay-width-factor</td><td>0.8</td><td>Breitenfaktor des schwebenden Bestätigungsfensters relativ zur Breite des Zielobjekts (80%).</td></tr>
-      <tr><td>layout-delete-confirmation-overlay-offset-block-start</td><td>spacing-large</td><td>Abstand des Overlays von der oberen Kante des Zielobjekts.</td></tr>
+      <tr><td>layout-delete-confirmation-overlay-offset-block-start</td><td>10%</td><td>Vertikaler Abstand des Overlays vom oberen Rand des Zielobjekts, relativ zur Objektgröße.</td></tr>
+      <tr><td>layout-delete-confirmation-overlay-max-height</td><td>calc(100vh - 10vh)</td><td>Maximalhöhe des Overlays relativ zum Viewport; danach scrollt der Inhalt innerhalb des Overlays.</td></tr>
       <tr><td>layout-delete-confirmation-content-gap</td><td>spacing-small</td><td>Vertikaler Abstand zwischen den Inhaltsblöcken im Overlay.</td></tr>
       <tr><td>layout-delete-confirmation-actions-gap</td><td>spacing-small</td><td>Horizontaler Abstand zwischen Abbrechen- und Löschen-Button.</td></tr>
       <tr><td>layout-delete-confirmation-actions-offset-block-start</td><td>spacing-large</td><td>Zusätzlicher vertikaler Abstand zwischen Bestätigungs-Eingabefeld und Actions-Zeile.</td></tr>
diff --git a/styles/01-foundations.css b/styles/01-foundations.css
index 288ba7e..279379e 100644
--- a/styles/01-foundations.css
+++ b/styles/01-foundations.css
@@ -217,7 +217,8 @@
   --text-delete-confirmation-overlay: var(--color-font-dark);
   --layout-delete-confirmation-target-max-width: 35rem;
   --layout-delete-confirmation-overlay-width-factor: 0.8;
-  --layout-delete-confirmation-overlay-offset-block-start: var(--spacing-large);
+  --layout-delete-confirmation-overlay-offset-block-start: 10%;
+  --layout-delete-confirmation-overlay-max-height: calc(100vh - 10vh);
   --layout-delete-confirmation-content-gap: var(--spacing-small);
   --layout-delete-confirmation-actions-gap: var(--spacing-small);
   --layout-delete-confirmation-actions-offset-block-start: var(--spacing-large);
diff --git a/styles/27-patterns-delete-confirmation.css b/styles/27-patterns-delete-confirmation.css
index 06f9f9e..3652f34 100644
--- a/styles/27-patterns-delete-confirmation.css
+++ b/styles/27-patterns-delete-confirmation.css
@@ -40,12 +40,15 @@
 
 .sg-delete-confirmation-pattern__floating-card {
   position: absolute;
-  top: 50%;
+  top: var(--layout-delete-confirmation-overlay-offset-block-start);
   left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translateX(-50%);
   width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
   box-sizing: border-box;
   max-width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
+  min-height: calc(100% - var(--layout-delete-confirmation-overlay-offset-block-start));
+  max-height: var(--layout-delete-confirmation-overlay-max-height);
+  overflow: auto;
   z-index: var(--layer-delete-confirmation-overlay);
   box-shadow: var(--shadow-overlay);
 }