From 0f89f4b2d23e69f88009a0fbf59c6bfbb9cdd696 Mon Sep 17 00:00:00 2001
From: Oscar Kilhed <oscar.kilhed@grafana.com>
Date: Tue, 4 Jun 2024 10:13:43 +0200
Subject: [PATCH] Grafana UI: stop input element of the react select component
 from overflowing and causing layout issues. (#88372)

* Grafana UI: stop input element of the react select component from overflowing the input container

* update snapshot since the css changed

---------

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
---
 packages/grafana-ui/src/components/Select/resetSelectStyles.ts  | 1 +
 .../components/__snapshots__/VariableQueryEditor.test.tsx.snap  | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-ui/src/components/Select/resetSelectStyles.ts b/packages/grafana-ui/src/components/Select/resetSelectStyles.ts
index 0449fd94e06..067cdaadf76 100644
--- a/packages/grafana-ui/src/components/Select/resetSelectStyles.ts
+++ b/packages/grafana-ui/src/components/Select/resetSelectStyles.ts
@@ -21,6 +21,7 @@ export default function resetSelectStyles(theme: GrafanaTheme2) {
         padding: 0,
         // Set an explicit z-index here to ensure this element always overlays the singleValue
         zIndex: 1,
+        overflow: 'hidden',
       };
     },
     loadingIndicator: () => ({}),
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/__snapshots__/VariableQueryEditor.test.tsx.snap b/public/app/plugins/datasource/cloud-monitoring/components/__snapshots__/VariableQueryEditor.test.tsx.snap
index e16162d1e3d..0f342bc4bf9 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/__snapshots__/VariableQueryEditor.test.tsx.snap
+++ b/public/app/plugins/datasource/cloud-monitoring/components/__snapshots__/VariableQueryEditor.test.tsx.snap
@@ -46,7 +46,7 @@ exports[`VariableQueryEditor renders correctly 1`] = `
               Loading...
             </div>
             <div
-              className=" css-lq7btu-Input"
+              className=" css-1tkw9oc-Input"
               data-value=""
             >
               <input