Add overlay host wrapper behavior for consistent target card height

This commit is contained in:
2026-05-28 14:35:23 +02:00
parent b3594d3f78
commit d2a66c6c5b
3 changed files with 13 additions and 2 deletions
+1 -1
View File
@@ -13,7 +13,7 @@
<section id="pattern-overlay-card" class="sg-delete-confirmation-pattern">
<p class="sg-preview-label">Pattern: Overlay Card</p>
<div class="sg-delete-confirmation-pattern__stage" data-pattern="overlay-card" data-dialog-open="false">
<div class="sg-delete-confirmation-pattern__stage sg-delete-confirmation-pattern__host sg-object-card" data-pattern="overlay-card" data-dialog-open="false">
<article class="sg-card sg-object-card sg-delete-confirmation-pattern__target" aria-label="Zu löschendes Objekt">
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header">
<div class="sg-strong">Alcon Inc.</div>
+1 -1
View File
@@ -112,7 +112,7 @@
</div>
<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">
<div class="sg-object-card sg-delete-confirmation-pattern sg-delete-confirmation-pattern__stage sg-delete-confirmation-pattern__host 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>
@@ -11,6 +11,17 @@
position: relative;
}
.sg-delete-confirmation-pattern__host {
display: flex;
flex-direction: column;
}
.sg-delete-confirmation-pattern__host > .sg-delete-confirmation-pattern__target {
flex: 1 1 auto;
width: 100%;
min-height: 100%;
}
.sg-delete-confirmation-pattern__target {
position: relative;
overflow: hidden;