Fix mobile pulldown width for form sections and slider row stability

semantic-tokens-components.html

@@ -108,6 +108,7 @@
       <tr><td>layout-pulldown-padding-inline</td><td>compact-interaction-padding-horizontal</td><td>Innenabstand links für Pulldown-Trigger und Select-Felder.</td></tr>
       <tr><td>layout-pulldown-chevron-offset</td><td>compact-interaction-padding-horizontal</td><td>Rechter Innenabstand des Chevron-Icons im Pulldown.</td></tr>
       <tr><td>layout-pulldown-chevron-reserved-space</td><td>spacing-large</td><td>Reservierte Breite zwischen Pulldown-Text und rechtem Chevron-Bereich.</td></tr>
+      <tr><td>layout-pulldown-panel-form-mobile-width</td><td>90%</td><td>Zielbreite für Pulldown-Panels mit Formularinhalt auf Mobile; wird durch die Viewport-Kappe begrenzt.</td></tr>
       <tr><td>surface-menu-panel-portal</td><td>color-light-grey</td><td>Fläche des Sandwich-Menü-Panels für große und kleine Variante.</td></tr>
       <tr><td>text-menu-link-portal</td><td>color-font-dark</td><td>Linktextfarbe im Sandwich-Menü für große und kleine Variante.</td></tr>
       <tr><td>text-activatable-remove</td><td>text-control-default</td><td>Zeichenfarbe des generischen Schließen-Kontrollfelds in aktivierbaren Varianten.</td></tr>

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;
+  }
 }
 
 /* ========================================================= */