diff --git a/foundations.html b/foundations.html
index b79abf0..d8425d7 100644
--- a/foundations.html
+++ b/foundations.html
@@ -166,7 +166,7 @@
| object-group-card-max-width | 650px | Maximale Breite der Group Card im Pattern Object Group Card. |
| object-group-card-height | 700px | Fixe Desktop-Höhe der Group Card im Pattern Object Group Card. |
| delete-confirmation-overlay-offset-block-start | 10% | Vertikaler Abstand des Overlays vom oberen Rand des Zielobjekts, relativ zur Objektgröße. |
- | delete-confirmation-overlay-max-height | calc(100vh - 10vh) | Maximalhöhe des Overlays relativ zum Viewport; danach scrollt der Inhalt innerhalb des Overlays. |
+ | delete-confirmation-overlay-max-height | 100% minus 2 × offset-block-start | Maximalhöhe des Overlays relativ zur Parent-Höhe; bei längeren Inhalten scrollt der bestehende Inhaltsbereich. |
| notifications-card-min-width | 445px | Mindestbreite der Notification Card im Pattern Notifications; 50px größer als die Object Card und Grundlage für Flex-Basis und Mindestbreite des Patterns. |
| search-field-width | 15.3rem | Fixe Breite des Suchfeld-Inputs inklusive Clear-Button-Bereich. |
| layer-pulldown-panel | 40 | Layer-Stufe für geöffnete Pulldown-Ausklappfelder, damit sie über anderen Inhalten liegen. |
diff --git a/patterns/delete-confirmation-overlay.html b/patterns/delete-confirmation-overlay.html
index 4e96d0d..7c3189d 100644
--- a/patterns/delete-confirmation-overlay.html
+++ b/patterns/delete-confirmation-overlay.html
@@ -223,12 +223,6 @@
);
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) => {
dialog.hidden = true;
@@ -389,7 +383,6 @@
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/semantic-tokens-patterns.html b/semantic-tokens-patterns.html
index 1055d13..fe67e08 100644
--- a/semantic-tokens-patterns.html
+++ b/semantic-tokens-patterns.html
@@ -134,7 +134,7 @@
| layout-delete-confirmation-target-max-width | 35rem | Maximalbreite der abgedunkelten Ziel-Card in der Pattern-Demo. |
| layout-delete-confirmation-overlay-width-factor | 0.8 | Breitenfaktor des schwebenden Bestätigungsfensters relativ zur Breite des Zielobjekts (80%). |
| layout-delete-confirmation-overlay-offset-block-start | 10% | Vertikaler Abstand des Overlays vom oberen Rand des Zielobjekts, relativ zur Objektgröße. |
- | layout-delete-confirmation-overlay-max-height | calc(100vh - 10vh) | Maximalhöhe des Overlays relativ zum Viewport; danach scrollt der Inhalt innerhalb des Overlays. |
+ | layout-delete-confirmation-overlay-max-height | 100% minus 2 × offset-block-start | Maximalhöhe des Overlays relativ zur Parent-Höhe; bei längeren Inhalten scrollt der bestehende Inhaltsbereich. |
| layout-delete-confirmation-content-gap | spacing-small | Vertikaler Abstand zwischen den Inhaltsblöcken im Overlay. |
| layout-delete-confirmation-actions-gap | spacing-small | Horizontaler Abstand zwischen Abbrechen- und Löschen-Button. |
| layout-delete-confirmation-actions-offset-block-start | spacing-large | Zusätzlicher vertikaler Abstand zwischen Bestätigungs-Eingabefeld und Actions-Zeile. |
diff --git a/styles/01-foundations.css b/styles/01-foundations.css
index 01ebb9a..bb1d167 100644
--- a/styles/01-foundations.css
+++ b/styles/01-foundations.css
@@ -231,7 +231,7 @@
--layout-delete-confirmation-target-max-width: 35rem;
--layout-delete-confirmation-overlay-width-factor: 0.8;
--layout-delete-confirmation-overlay-offset-block-start: 10%;
- --layout-delete-confirmation-overlay-max-height: calc(100vh - 10vh);
+ --layout-delete-confirmation-overlay-max-height: calc(100% - var(--layout-delete-confirmation-overlay-offset-block-start) - var(--layout-delete-confirmation-overlay-offset-block-start));
--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 dd319df..f44caac 100644
--- a/styles/27-patterns-delete-confirmation.css
+++ b/styles/27-patterns-delete-confirmation.css
@@ -42,13 +42,14 @@
.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));
- height: var(--layout-delete-confirmation-overlay-height, auto);
+ height: auto;
+ max-height: var(--layout-delete-confirmation-overlay-max-height);
overflow: hidden;
z-index: var(--layer-delete-confirmation-overlay);
box-shadow: var(--shadow-overlay);
diff --git a/styles/33-layouts-vsf-list-detailseite.css b/styles/33-layouts-vsf-list-detailseite.css
index f1f6704..2c8080d 100644
--- a/styles/33-layouts-vsf-list-detailseite.css
+++ b/styles/33-layouts-vsf-list-detailseite.css
@@ -48,10 +48,10 @@
.sg-vsf-list-detail-page__meldungen-overlay-pattern {
max-width: 100%;
+ --layout-delete-confirmation-overlay-offset-block-start: calc(var(--spacing-large) * 5);
}
.sg-vsf-list-detail-page__meldungen-overlay-pattern .sg-delete-confirmation-pattern__floating-card {
- top: calc(var(--spacing-large) * 5);
transform: translateX(-50%);
}