From f58c80a333c638c8c42c253e9cf4be299aa2b4ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Tue, 16 Jun 2026 10:48:08 +0200
Subject: [PATCH] Measure overlay height from host

---
 patterns/delete-confirmation-overlay.html  |  6 ++++++
 styles/27-patterns-delete-confirmation.css | 10 +++-------
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/patterns/delete-confirmation-overlay.html b/patterns/delete-confirmation-overlay.html
index 2124044..66e316f 100644
--- a/patterns/delete-confirmation-overlay.html
+++ b/patterns/delete-confirmation-overlay.html
@@ -221,6 +221,11 @@
       );
       let draftListIds = new Set(committedListIds);
       let resetAddToListDraftState = () => {};
+      const updateFloatingCardHeight = (dialog) => {
+        const stageHeight = stage.getBoundingClientRect().height;
+        const floatingCardHeight = Math.max(0, Math.round(stageHeight * 0.9));
+        dialog.style.setProperty('--layout-delete-confirmation-overlay-height', `${floatingCardHeight}px`);
+      };
 
       const closeStageDialogs = ({ resetAddToListDraft = false } = {}) => {
         stage.querySelectorAll('[data-overlay-dialog]').forEach((dialog) => {
@@ -382,6 +387,7 @@
 
           closeStageDialogs({ resetAddToListDraft: target === 'add-to-list' });
           dialog.hidden = false;
+          updateFloatingCardHeight(dialog);
           stage.dataset.dialogOpen = 'true';
 
           const menuWrap = link.closest('.sg-sandwich-menu-wrap');
diff --git a/styles/27-patterns-delete-confirmation.css b/styles/27-patterns-delete-confirmation.css
index dad749a..b168361 100644
--- a/styles/27-patterns-delete-confirmation.css
+++ b/styles/27-patterns-delete-confirmation.css
@@ -12,10 +12,6 @@
   overflow: visible;
 }
 
-.sg-delete-confirmation-pattern__stage[data-dialog-open="true"] {
-  padding-bottom: calc(var(--layout-delete-confirmation-overlay-max-height) + 10px);
-}
-
 .sg-delete-confirmation-pattern__host {
   display: flex;
   flex-direction: column;
@@ -46,13 +42,13 @@
 
 .sg-delete-confirmation-pattern__floating-card {
   position: absolute;
-  top: var(--layout-delete-confirmation-overlay-offset-block-start);
+  top: 50%;
   left: 50%;
-  transform: translateX(-50%);
+  transform: translate(-50%, -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));
-  max-height: calc(100vh - var(--layout-delete-confirmation-overlay-offset-block-start) - 10px);
+  height: var(--layout-delete-confirmation-overlay-height, auto);
   overflow: auto;
   z-index: var(--layer-delete-confirmation-overlay);
   box-shadow: var(--shadow-overlay);