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: ( - props.runQueries({ exploreId })} - /> +
+ props.runQueries({ exploreId })} + /> +
), }; @@ -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);