From e4b1347ca50a69661b19c2da4e5c779b81cd5734 Mon Sep 17 00:00:00 2001
From: Arpit Bhardwaj <arpitbhardwaj09@gmail.com>
Date: Fri, 14 Oct 2022 18:54:08 +0530
Subject: [PATCH] Select Dropdown alignment fix (#56858)

---
 .../datasource/graphite/configuration/ConfigEditor.tsx    | 8 ++++----
 .../datasource/prometheus/configuration/PromSettings.tsx  | 4 +++-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/public/app/plugins/datasource/graphite/configuration/ConfigEditor.tsx b/public/app/plugins/datasource/graphite/configuration/ConfigEditor.tsx
index c2fedd7a79d..d0fdf8c752b 100644
--- a/public/app/plugins/datasource/graphite/configuration/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/graphite/configuration/ConfigEditor.tsx
@@ -6,7 +6,7 @@ import {
   onUpdateDatasourceJsonDataOptionSelect,
   onUpdateDatasourceJsonDataOptionChecked,
 } from '@grafana/data';
-import { Alert, DataSourceHttpSettings, InlineFormLabel, LegacyForms } from '@grafana/ui';
+import { Alert, DataSourceHttpSettings, InlineFormLabel, LegacyForms, Select } from '@grafana/ui';
 import store from 'app/core/store';
 
 import { GraphiteOptions, GraphiteType } from '../types';
@@ -15,7 +15,7 @@ import { DEFAULT_GRAPHITE_VERSION, GRAPHITE_VERSIONS } from '../versions';
 import { MappingsConfiguration } from './MappingsConfiguration';
 import { fromString, toString } from './parseLokiLabelMappings';
 
-const { Select, Switch } = LegacyForms;
+const { Switch } = LegacyForms;
 export const SHOW_MAPPINGS_HELP_KEY = 'grafana.datasources.graphite.config.showMappingsHelp';
 
 const graphiteVersions = GRAPHITE_VERSIONS.map((version) => ({ label: `${version}.x`, value: version }));
@@ -86,7 +86,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
                 aria-label="Graphite version"
                 value={currentVersion}
                 options={graphiteVersions}
-                width={8}
+                className="width-8"
                 onChange={onUpdateDatasourceJsonDataOptionSelect(this.props, 'graphiteVersion')}
               />
             </div>
@@ -98,7 +98,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
                 aria-label="Graphite backend type"
                 options={graphiteTypes}
                 value={graphiteTypes.find((type) => type.value === options.jsonData.graphiteType)}
-                width={8}
+                className="width-8"
                 onChange={onUpdateDatasourceJsonDataOptionSelect(this.props, 'graphiteType')}
               />
             </div>
diff --git a/public/app/plugins/datasource/prometheus/configuration/PromSettings.tsx b/public/app/plugins/datasource/prometheus/configuration/PromSettings.tsx
index fcb6b7377a6..fdddfb17c90 100644
--- a/public/app/plugins/datasource/prometheus/configuration/PromSettings.tsx
+++ b/public/app/plugins/datasource/prometheus/configuration/PromSettings.tsx
@@ -13,12 +13,13 @@ import {
   InlineFormLabel,
   LegacyForms,
   regexValidation,
+  Select,
 } from '@grafana/ui';
 
 import { PromOptions } from '../types';
 
 import { ExemplarsSettings } from './ExemplarsSettings';
-const { Select, Input, FormField } = LegacyForms;
+const { Input, FormField } = LegacyForms;
 
 const httpOptions = [
   { value: 'POST', label: 'POST' },
@@ -89,6 +90,7 @@ export const PromSettings = (props: Props) => {
             options={httpOptions}
             value={httpOptions.find((o) => o.value === options.jsonData.httpMethod)}
             onChange={onChangeHandler('httpMethod', options, onOptionsChange)}
+            className="width-6"
           />
         </div>
       </div>