Prom/Loki: Query editor padding fix (#113727)

packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilderOptions.tsx

@@ -6,8 +6,8 @@ import * as React from 'react';
 import { CoreApp, SelectableValue } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { Trans, t } from '@grafana/i18n';
-import { EditorField, EditorRow, EditorSwitch } from '@grafana/plugin-ui';
-import { AutoSizeInput, RadioButtonGroup, Select } from '@grafana/ui';
+import { EditorField, EditorSwitch } from '@grafana/plugin-ui';
+import { AutoSizeInput, Box, RadioButtonGroup, Select } from '@grafana/ui';
 
 import { getQueryTypeChangeHandler, getQueryTypeOptions } from '../../components/PromExploreExtraField';
 import { PromQueryFormat } from '../../dataquery';
@@ -80,7 +80,7 @@ export const PromQueryBuilderOptions = React.memo<PromQueryBuilderOptionsProps>(
     const queryTypeLabel = queryTypeOptions.find((x) => x.value === queryTypeValue)!.label;
 
     return (
-      <EditorRow>
+      <Box backgroundColor={'secondary'}>
         <div data-testid={selectors.components.DataSource.Prometheus.queryEditor.options}>
           <QueryOptionGroup
             title={t('grafana-prometheus.querybuilder.prom-query-builder-options.title-options', 'Options')}
@@ -181,7 +181,7 @@ export const PromQueryBuilderOptions = React.memo<PromQueryBuilderOptionsProps>(
             )}
           </QueryOptionGroup>
         </div>
-      </EditorRow>
+      </Box>
     );
   }
 );