[v11.0.x] Scenes: Adjust styles to allow shrinking of variable select…

…ors (#87251) Scenes: Adjust styles to allow shrinking of variable selectors (#87085) (cherry picked from commit bc9010a) Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com>
grafana · May 2, 2024 · d56c3a0 · d56c3a0
1 parent e103995
commit d56c3a0
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git 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
@@ -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',