diff --git a/semantic-tokens-components.html b/semantic-tokens-components.html
index bc5e3f0..ebe52cd 100644
--- a/semantic-tokens-components.html
+++ b/semantic-tokens-components.html
@@ -108,6 +108,7 @@
| layout-pulldown-padding-inline | compact-interaction-padding-horizontal | Innenabstand links für Pulldown-Trigger und Select-Felder. |
| layout-pulldown-chevron-offset | compact-interaction-padding-horizontal | Rechter Innenabstand des Chevron-Icons im Pulldown. |
| layout-pulldown-chevron-reserved-space | spacing-large | Reservierte Breite zwischen Pulldown-Text und rechtem Chevron-Bereich. |
+ | layout-pulldown-panel-form-mobile-width | 90% | Zielbreite für Pulldown-Panels mit Formularinhalt auf Mobile; wird durch die Viewport-Kappe begrenzt. |
| surface-menu-panel-portal | color-light-grey | Fläche des Sandwich-Menü-Panels für große und kleine Variante. |
| text-menu-link-portal | color-font-dark | Linktextfarbe im Sandwich-Menü für große und kleine Variante. |
| text-activatable-remove | text-control-default | Zeichenfarbe des generischen Schließen-Kontrollfelds in aktivierbaren Varianten. |
diff --git a/styleguide.css b/styleguide.css
index e578066..7c5deb4 100644
--- a/styleguide.css
+++ b/styleguide.css
@@ -72,6 +72,7 @@
--layout-pulldown-chevron-offset: var(--compact-interaction-padding-horizontal);
--layout-tab-navigation-large-padding-inline: var(--interaction-padding-horizontal);
--layout-pulldown-chevron-reserved-space: var(--spacing-large);
+ --layout-pulldown-panel-form-mobile-width: 90%;
--layout-input-label-width: var(--dimension-input-label-width);
--layout-input-field-desktop-width: var(--dimension-input-field-desktop-width);
--layout-input-field-max-width: var(--dimension-input-field-max-width);
@@ -1136,6 +1137,7 @@ section + section {
min-width: 100%;
width: max-content;
max-width: calc(100vw - (2 * var(--spacing-large)));
+ box-sizing: border-box;
padding-block: var(--spacing-large);
padding-inline: var(--layout-pulldown-panel-padding-inline);
border-radius: var(--radius-card);
@@ -1560,6 +1562,54 @@ section + section {
width: 100%;
}
+ .sg-options-row .sg-pulldown-panel:has(.sg-form-sections-card-wrapper) {
+ width: min(
+ var(--layout-pulldown-panel-form-mobile-width),
+ calc(100vw - (2 * var(--spacing-large)))
+ );
+ min-width: 0;
+ max-width: calc(100vw - (2 * var(--spacing-large)));
+ }
+
+ .sg-options-row .sg-pulldown-panel .sg-form-sections-card-wrapper,
+ .sg-options-row .sg-pulldown-panel .sg-form-sections-card {
+ min-width: 0;
+ width: 100%;
+ max-width: 100%;
+ }
+
+ .sg-options-row .sg-pulldown-panel .sg-slider-row[data-activatable="true"] {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) auto var(--interaction-height);
+ align-items: center;
+ column-gap: var(--spacing-small);
+ padding-right: 0;
+ }
+
+ .sg-options-row .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-label {
+ min-width: 0;
+ flex: 0 0 auto;
+ }
+
+ .sg-options-row .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider {
+ min-width: 0;
+ max-width: 100%;
+ width: 100%;
+ }
+
+ .sg-options-row .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider-value {
+ min-width: calc(var(--interaction-height) * 1.25);
+ justify-self: end;
+ align-self: center;
+ white-space: nowrap;
+ }
+
+ .sg-options-row .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-activatable-remove {
+ position: static;
+ transform: none;
+ grid-column: 3;
+ grid-row: 1;
+ }
}
/* ========================================================= */