Navigation: Improve responsiveness of `TopSearchBar` (#53777)

* remove some magic numbers + used grid for better responsiveness

* remove old responsive styles

public/app/core/components/AppChrome/TopSearchBar.tsx

@@ -11,18 +11,14 @@ export function TopSearchBar() {
   const styles = useStyles2(getStyles);
 
   return (
-    <div className={styles.searchBar}>
+    <div className={styles.container}>
-      <a className={styles.logo} href="/" title="Go to home">
+      <div className={styles.leftContent}>
-        <Icon name="grafana" size="xl" />
+        <a className={styles.logo} href="/" title="Go to home">
-      </a>
+          <Icon name="grafana" size="xl" />
+        </a>
+      </div>
       <div className={styles.searchWrapper}>
-        <FilterInput
+        <FilterInput placeholder="Search grafana" value={''} onChange={() => {}} className={styles.searchInput} />
-          width={50}
-          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',
+      justifyContent: 'flex-end',
-      width: 25, // this and the left pos is to make search input perfectly centered
-      left: -83,
     }),
     actionItem: css({
       display: 'flex',

public/sass/_grafana.scss

@@ -99,5 +99,4 @@
 @import 'pages/errorpage';
 @import 'pages/explore';
 @import 'pages/plugins';
-@import 'old_responsive';
 @import 'components/view_states';

public/sass/_old_responsive.scss

@@ -1,10 +0,0 @@
-// Media queries
-// ---------------------
-
-@include media-breakpoint-down(xs) {
-  input[type='text'],
-  input[type='number'],
-  textarea {
-    font-size: 16px;
-  }
-}