Tempo: Fix issue with button click area being too large (#81500)

Fix issue with button click area being too large
This commit is contained in:
Joey 2024-02-01 09:48:18 +00:00 committed by GitHub
parent 1606095a5c
commit fd54d25496
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -2,7 +2,7 @@ import { css } from '@emotion/css';
import { defaults } from 'lodash';
import React, { useRef, useState } from 'react';
import { QueryEditorProps } from '@grafana/data';
import { GrafanaTheme2, QueryEditorProps } from '@grafana/data';
import { config, reportInteraction } from '@grafana/runtime';
import { Button, InlineLabel, useStyles2 } from '@grafana/ui';
@ -46,9 +46,8 @@ export function QueryEditor(props: Props) {
</a>
</InlineLabel>
{!showCopyFromSearchButton && (
<InlineLabel>
<div>
Continue editing the query from the Search tab?
<div className={styles.copyContainer}>
<span>Continue editing the query from the Search tab?</span>
<Button
variant="secondary"
size="sm"
@ -71,7 +70,6 @@ export function QueryEditor(props: Props) {
Copy query from Search
</Button>
</div>
</InlineLabel>
)}
<TraceQLEditor
placeholder="Enter a TraceQL query or trace ID (run with Shift+Enter)"
@ -87,8 +85,13 @@ export function QueryEditor(props: Props) {
);
}
const getStyles = () => ({
const getStyles = (theme: GrafanaTheme2) => ({
optionsContainer: css({
marginTop: '10px',
}),
copyContainer: css({
backgroundColor: theme.colors.background.secondary,
padding: theme.spacing(0.5, 1),
fontSize: theme.typography.body.fontSize,
}),
});