From ac5e54a225de4d222de0e9db06a4d322d07e8c7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Thu, 13 Nov 2025 09:56:10 +0100
Subject: [PATCH] Prom/Loki: Query editor padding fix (#113727)

---
 .../querybuilder/components/PromQueryBuilderOptions.tsx   | 8 ++++----
 .../querybuilder/components/LokiQueryBuilderOptions.tsx   | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilderOptions.tsx b/packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilderOptions.tsx
index 17347c7a20b..3468be71316 100644
--- a/packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilderOptions.tsx
+++ b/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>
     );
   }
 );
diff --git a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderOptions.tsx b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderOptions.tsx
index 8328bc42b86..27d199cb8a5 100644
--- a/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderOptions.tsx
+++ b/public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderOptions.tsx
@@ -3,9 +3,9 @@ import { useCallback, useEffect, useMemo } from 'react';
 import * as React from 'react';
 
 import { CoreApp, isValidGrafanaDuration, LogSortOrderChangeEvent, LogsSortOrder, store } from '@grafana/data';
-import { EditorField, EditorRow, QueryOptionGroup } from '@grafana/plugin-ui';
+import { EditorField, QueryOptionGroup } from '@grafana/plugin-ui';
 import { getAppEvents } from '@grafana/runtime';
-import { AutoSizeInput, RadioButtonGroup } from '@grafana/ui';
+import { AutoSizeInput, Box, RadioButtonGroup } from '@grafana/ui';
 
 import {
   getQueryDirectionLabel,
@@ -133,7 +133,7 @@ export const LokiQueryBuilderOptions = React.memo<Props>(
     }, [query.step, datasource]);
 
     return (
-      <EditorRow>
+      <Box backgroundColor={'secondary'}>
         <QueryOptionGroup
           title="Options"
           collapsedInfo={getCollapsedInfo(query, queryType, maxLines, isLogQuery, isValidStep, query.direction)}
@@ -196,7 +196,7 @@ export const LokiQueryBuilderOptions = React.memo<Props>(
             </>
           )}
         </QueryOptionGroup>
-      </EditorRow>
+      </Box>
     );
   }
 );