From bc9010a95bde2ca3041f84c90086479fcb0ed314 Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Thu, 2 May 2024 16:23:29 +0100
Subject: [PATCH] Scenes: Adjust styles to allow shrinking of variable
 selectors (#87085)

---
 .../grafana-ui/src/components/Select/ValueContainer.tsx  | 9 ++++-----
 .../grafana-ui/src/components/Select/getSelectStyles.ts  | 3 ++-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/grafana-ui/src/components/Select/ValueContainer.tsx b/packages/grafana-ui/src/components/Select/ValueContainer.tsx
index 484f8518ecb..5ad36ce8f92 100644
--- a/packages/grafana-ui/src/components/Select/ValueContainer.tsx
+++ b/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}>
diff --git a/packages/grafana-ui/src/components/Select/getSelectStyles.ts b/packages/grafana-ui/src/components/Select/getSelectStyles.ts
index 84ce715aab2..7ce6d12c462 100644
--- a/packages/grafana-ui/src/components/Select/getSelectStyles.ts
+++ b/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',