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.", "2"],
[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.", "5"]
[0, 0, 0, "Styles should be written using objects.", "4"]
],
"public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.tsx:5381": [
[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`
margin-right: ${theme.spacing(2)};
text-wrap: nowrap;
`,
tooltip: css`
color: #aaa;

View File

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