From f8275b52aa4e64cd1b378d1e0da9a8784526517f Mon Sep 17 00:00:00 2001
From: Haris Rozajac <58232930+harisrozajac@users.noreply.github.com>
Date: Sun, 31 Mar 2024 17:41:44 -0600
Subject: [PATCH] Explore: Add padding to query content in query inspector
 (#85309)

Add padding
---
 .../explore/ExploreQueryInspector.tsx         | 24 +++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/public/app/features/explore/ExploreQueryInspector.tsx b/public/app/features/explore/ExploreQueryInspector.tsx
index 4b611fae705..36b371bdc82 100644
--- a/public/app/features/explore/ExploreQueryInspector.tsx
+++ b/public/app/features/explore/ExploreQueryInspector.tsx
@@ -1,10 +1,11 @@
+import { css } from '@emotion/css';
 import React, { useEffect, useState } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 
-import { CoreApp, LoadingState } from '@grafana/data';
+import { CoreApp, GrafanaTheme2, LoadingState } from '@grafana/data';
 import { reportInteraction } from '@grafana/runtime/src';
 import { defaultTimeZone, TimeZone } from '@grafana/schema';
-import { TabbedContainer, TabConfig } from '@grafana/ui';
+import { TabbedContainer, TabConfig, useStyles2 } from '@grafana/ui';
 import { requestIdGenerator } from 'app/core/utils/explore';
 import { ExploreDrawer } from 'app/features/explore/ExploreDrawer';
 import { InspectDataTab } from 'app/features/inspector/InspectDataTab';
@@ -40,6 +41,7 @@ export function ExploreQueryInspector(props: Props) {
   if (!errors?.length && queryResponse?.error) {
     errors = [queryResponse.error];
   }
+  const styles = useStyles2(getStyles);
 
   useEffect(() => {
     reportInteraction('grafana_explore_query_inspector_opened');
@@ -82,11 +84,13 @@ export function ExploreQueryInspector(props: Props) {
     value: 'query',
     icon: 'info-circle',
     content: (
-      <QueryInspector
-        instanceId={isMixed ? mixedRequestId(0, requestIdGenerator(exploreId)) : requestIdGenerator(exploreId)}
-        data={queryResponse}
-        onRefreshQuery={() => props.runQueries({ exploreId })}
-      />
+      <div className={styles.queryInspectorWrapper}>
+        <QueryInspector
+          instanceId={isMixed ? mixedRequestId(0, requestIdGenerator(exploreId)) : requestIdGenerator(exploreId)}
+          data={queryResponse}
+          onRefreshQuery={() => props.runQueries({ exploreId })}
+        />
+      </div>
     ),
   };
 
@@ -121,6 +125,12 @@ const mapDispatchToProps = {
   runQueries,
 };
 
+const getStyles = (theme: GrafanaTheme2) => ({
+  queryInspectorWrapper: css({
+    paddingBottom: theme.spacing(3),
+  }),
+});
+
 const connector = connect(mapStateToProps, mapDispatchToProps);
 
 export default connector(ExploreQueryInspector);