TraceView: Improve small screen design in TracePageSearchBar (#78807)

Improve small screen design in TracePageSearchBar
This commit is contained in:
Joey 2023-11-30 10:26:52 +00:00 committed by GitHub
parent d33a624ba6
commit ea3dda60ce
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 5 additions and 7 deletions

View File

@ -3620,8 +3620,7 @@ exports[`better eslint`] = {
[0, 0, 0, "Styles should be written using objects.", "1"], [0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"], [0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"], [0, 0, 0, "Styles should be written using objects.", "3"],
[0, 0, 0, "Styles should be written using objects.", "4"], [0, 0, 0, "Styles should be written using objects.", "4"]
[0, 0, 0, "Styles should be written using objects.", "5"]
], ],
"public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.tsx:5381": [ "public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"], [0, 0, 0, "Styles should be written using objects.", "0"],

View File

@ -244,6 +244,7 @@ export const getStyles = (theme: GrafanaTheme2, showSpanFilters: boolean) => {
`, `,
matches: css` matches: css`
margin-right: ${theme.spacing(2)}; margin-right: ${theme.spacing(2)};
text-wrap: nowrap;
`, `,
tooltip: css` tooltip: css`
color: #aaa; color: #aaa;

View File

@ -86,7 +86,7 @@ export default memo(function TracePageSearchBar(props: TracePageSearchBarProps)
<div className={styles.container}> <div className={styles.container}>
<div className={styles.controls}> <div className={styles.controls}>
<> <>
<div className={styles.clearButton}> <div>
<Button <Button
variant="destructive" variant="destructive"
disabled={!clearEnabled} disabled={!clearEnabled}
@ -161,9 +161,6 @@ export const getStyles = (theme: GrafanaTheme2) => {
justify-content: flex-end; justify-content: flex-end;
margin: 5px 0 0 0; margin: 5px 0 0 0;
`, `,
clearButton: css`
order: 1;
`,
matchesOnly: css` matchesOnly: css`
display: inline-flex; display: inline-flex;
margin: 0 0 0 25px; margin: 0 0 0 25px;
@ -179,7 +176,8 @@ export const getStyles = (theme: GrafanaTheme2) => {
`, `,
nextPrevResult: css` nextPrevResult: css`
margin-left: auto; margin-left: auto;
order: 2; display: flex;
align-items: center;
`, `,
}; };
}; };