From ea3dda60ce47ba54bc540473cbd2f20705b7d4dd Mon Sep 17 00:00:00 2001
From: Joey <90795735+joey-grafana@users.noreply.github.com>
Date: Thu, 30 Nov 2023 10:26:52 +0000
Subject: [PATCH] TraceView: Improve small screen design in TracePageSearchBar
 (#78807)

Improve small screen design in TracePageSearchBar
---
 .betterer.results                                         | 3 +--
 .../TracePageHeader/SearchBar/NextPrevResult.tsx          | 1 +
 .../TracePageHeader/SearchBar/TracePageSearchBar.tsx      | 8 +++-----
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index b195197f5a6..515f8d40135 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -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"],
diff --git a/public/app/features/explore/TraceView/components/TracePageHeader/SearchBar/NextPrevResult.tsx b/public/app/features/explore/TraceView/components/TracePageHeader/SearchBar/NextPrevResult.tsx
index 50971264258..424aa66308f 100644
--- a/public/app/features/explore/TraceView/components/TracePageHeader/SearchBar/NextPrevResult.tsx
+++ b/public/app/features/explore/TraceView/components/TracePageHeader/SearchBar/NextPrevResult.tsx
@@ -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;
diff --git a/public/app/features/explore/TraceView/components/TracePageHeader/SearchBar/TracePageSearchBar.tsx b/public/app/features/explore/TraceView/components/TracePageHeader/SearchBar/TracePageSearchBar.tsx
index 948615af288..0a49a52546e 100644
--- a/public/app/features/explore/TraceView/components/TracePageHeader/SearchBar/TracePageSearchBar.tsx
+++ b/public/app/features/explore/TraceView/components/TracePageHeader/SearchBar/TracePageSearchBar.tsx
@@ -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;
     `,
   };
 };