From 7eab08364ee6e01b69d0c46355b63edd70ed050a Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Tue, 16 Aug 2022 15:09:22 +0100
Subject: [PATCH] Navigation: Improve responsiveness of `TopSearchBar` (#53777)

* remove some magic numbers + used grid for better responsiveness

* remove old responsive styles
---
 .../components/AppChrome/TopSearchBar.tsx     | 32 ++++++++-----------
 public/sass/_grafana.scss                     |  1 -
 public/sass/_old_responsive.scss              | 10 ------
 3 files changed, 14 insertions(+), 29 deletions(-)
 delete mode 100644 public/sass/_old_responsive.scss

diff --git a/public/app/core/components/AppChrome/TopSearchBar.tsx b/public/app/core/components/AppChrome/TopSearchBar.tsx
index 113da41d8e9..54cae1fc30e 100644
--- a/public/app/core/components/AppChrome/TopSearchBar.tsx
+++ b/public/app/core/components/AppChrome/TopSearchBar.tsx
@@ -11,18 +11,14 @@ export function TopSearchBar() {
   const styles = useStyles2(getStyles);
 
   return (
-    <div className={styles.searchBar}>
-      <a className={styles.logo} href="/" title="Go to home">
-        <Icon name="grafana" size="xl" />
-      </a>
+    <div className={styles.container}>
+      <div className={styles.leftContent}>
+        <a className={styles.logo} href="/" title="Go to home">
+          <Icon name="grafana" size="xl" />
+        </a>
+      </div>
       <div className={styles.searchWrapper}>
-        <FilterInput
-          width={50}
-          placeholder="Search grafana"
-          value={''}
-          onChange={() => {}}
-          className={styles.searchInput}
-        />
+        <FilterInput placeholder="Search grafana" value={''} onChange={() => {}} className={styles.searchInput} />
       </div>
       <div className={styles.actions}>
         <Tooltip placement="bottom" content="Help menu (todo)">
@@ -62,14 +58,17 @@ export function ProfileMenu() {
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
-    searchBar: css({
+    container: css({
       height: TOP_BAR_LEVEL_HEIGHT,
-      display: 'flex',
+      display: 'grid',
+      gridTemplateColumns: '1fr 2fr 1fr',
       padding: theme.spacing(0, 2),
       alignItems: 'center',
-      justifyContent: 'space-between',
       border: `1px solid ${theme.colors.border.weak}`,
     }),
+    leftContent: css({
+      display: 'flex',
+    }),
     logo: css({
       display: 'flex',
     }),
@@ -77,11 +76,8 @@ const getStyles = (theme: GrafanaTheme2) => {
     searchInput: css({}),
     actions: css({
       display: 'flex',
-      flexGrow: 0,
       gap: theme.spacing(1),
-      position: 'relative',
-      width: 25, // this and the left pos is to make search input perfectly centered
-      left: -83,
+      justifyContent: 'flex-end',
     }),
     actionItem: css({
       display: 'flex',
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index 8748d85aaaa..d5416207d77 100644
--- a/public/sass/_grafana.scss
+++ b/public/sass/_grafana.scss
@@ -99,5 +99,4 @@
 @import 'pages/errorpage';
 @import 'pages/explore';
 @import 'pages/plugins';
-@import 'old_responsive';
 @import 'components/view_states';
diff --git a/public/sass/_old_responsive.scss b/public/sass/_old_responsive.scss
deleted file mode 100644
index 125f735759d..00000000000
--- a/public/sass/_old_responsive.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-// Media queries
-// ---------------------
-
-@include media-breakpoint-down(xs) {
-  input[type='text'],
-  input[type='number'],
-  textarea {
-    font-size: 16px;
-  }
-}