Pulldown: robust long-value trigger and panel width/wrap behavior

styles/10-components-interactive-elements.css

@@ -197,12 +197,21 @@
     }
 
     .sg-pulldown-demo__trigger {
+      display: block;
+      width: 100%;
+      min-width: 0;
       text-align: left;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
     .sg-pulldown--selected {
       background-color: var(--surface-control-active);
       color: var(--text-control-default);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
     .sg-pulldown--inactive-selectable {
@@ -1058,7 +1067,10 @@
       gap: var(--spacing-small);
       min-width: 100%;
       width: max-content;
-      max-width: calc(100vw - (2 * var(--spacing-large)));
+      max-width: min(
+        var(--layout-multiselect-pulldown-panel-desktop-width),
+        calc(100dvw - (2 * var(--spacing-large)))
+      );
       box-sizing: border-box;
       padding-block: var(--spacing-large);
       padding-inline: var(--layout-pulldown-panel-padding-inline);
@@ -1139,11 +1151,12 @@
     .sg-pulldown-option {
       display: flex;
       gap: var(--spacing-small);
-      align-items: center;
+      align-items: flex-start;
       padding-block: var(--interaction-padding-vertical);
       padding-inline: var(--layout-pulldown-option-padding-inline);
       border-radius: var(--radius-interaction);
-      white-space: nowrap;
+      white-space: normal;
+      overflow-wrap: anywhere;
       color: var(--text-control-default);
       cursor: pointer;
     }