Add width to select components to not span the whole width (#105323)

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`}

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' },