From b79c8b2a9462651d4c6037c917cc7ccdbb358d11 Mon Sep 17 00:00:00 2001
From: Javier Ruiz <javiruiz01@users.noreply.github.com>
Date: Tue, 13 May 2025 13:59:46 +0200
Subject: [PATCH] Add width to select components to not span the whole width
 (#105323)

---
 .../datasource/tempo/SearchTraceQLEditor/SearchField.tsx       | 3 +++
 .../datasource/tempo/SearchTraceQLEditor/TraceQLSearch.tsx     | 1 +
 2 files changed, 4 insertions(+)

diff --git a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.tsx b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.tsx
index b461c0d0b9a..cd51b4c1764 100644
--- a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.tsx
+++ b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.tsx
@@ -147,6 +147,7 @@ const SearchField = ({
       <Stack gap={0} width="auto">
         {!hideScope && (
           <Select
+            width="auto"
             className={styles.dropdown}
             inputId={`${filter.id}-scope`}
             options={addVariablesToOptions ? withTemplateVariableOptions(scopeOptions) : scopeOptions}
@@ -158,6 +159,7 @@ const SearchField = ({
         )}
         {!hideTag && (
           <Select
+            width="auto"
             className={styles.dropdown}
             inputId={`${filter.id}-tag`}
             isLoading={isTagsLoading}
@@ -197,6 +199,7 @@ const SearchField = ({
              * For example the number of span names being returned can easily reach 10s of thousands,
              * which is enough to cause a user's web browser to seize up
              */
+            width="auto"
             virtualized
             className={styles.dropdown}
             inputId={`${filter.id}-value`}
diff --git a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TraceQLSearch.tsx b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TraceQLSearch.tsx
index 70837ee3333..df51c51b00e 100644
--- a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TraceQLSearch.tsx
+++ b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TraceQLSearch.tsx
@@ -187,6 +187,7 @@ const TraceQLSearch = ({ datasource, query, onChange, onClearResults, app, addVa
           >
             <Stack gap={0}>
               <Select
+                width="auto"
                 options={[
                   { label: 'span', value: 'span' },
                   { label: 'trace', value: 'trace' },