[v11.0.x] Scenes: Adjust styles to allow shrinking of variable selectors (#87251)

Scenes: Adjust styles to allow shrinking of variable selectors (#87085)

(cherry picked from commit bc9010a95b)

Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com>

packages/grafana-ui/src/components/Select/ValueContainer.tsx

@@ -33,11 +33,10 @@ class UnthemedValueContainer extends Component<any & { theme: GrafanaTheme2 }> {
     const noWrap = this.props.selectProps?.noMultiValueWrap && !this.props.selectProps?.menuIsOpen;
     const styles = getSelectStyles(theme);
     const dataTestid = selectProps['data-testid'];
-    const className = cx(
-      styles.valueContainer,
-      isMulti && styles.valueContainerMulti,
-      noWrap && styles.valueContainerMultiNoWrap
-    );
+    const className = cx(styles.valueContainer, {
+      [styles.valueContainerMulti]: isMulti && !noWrap,
+      [styles.valueContainerMultiNoWrap]: isMulti && noWrap,
+    });
 
     return (
       <div data-testid={dataTestid} className={className}>

packages/grafana-ui/src/components/Select/getSelectStyles.ts

@@ -97,7 +97,8 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme2) => {
       display: 'flex',
     }),
     valueContainerMultiNoWrap: css({
-      flexWrap: 'nowrap',
+      display: 'grid',
+      gridAutoFlow: 'column',
     }),
     loadingMessage: css({
       label: 'grafana-select-loading-message',