Measure overlay height from host

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');

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);