From 4e90a7211530532f8bfb73bee549d23fd80aaa04 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Mon, 30 May 2022 13:00:02 -0400
Subject: [PATCH] [v9.0.x] SearchV2: Fix search input width on mobile (#49853)

Co-authored-by: Maria Alexandra <239999+axelavargas@users.noreply.github.com>
---
 .../search/components/ManageDashboardsNew.tsx    | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/public/app/features/search/components/ManageDashboardsNew.tsx b/public/app/features/search/components/ManageDashboardsNew.tsx
index 9756f9bf99e..22468b9fc1f 100644
--- a/public/app/features/search/components/ManageDashboardsNew.tsx
+++ b/public/app/features/search/components/ManageDashboardsNew.tsx
@@ -1,4 +1,4 @@
-import { css } from '@emotion/css';
+import { css, cx } from '@emotion/css';
 import React, { useState } from 'react';
 import { useDebounce } from 'react-use';
 
@@ -38,8 +38,8 @@ export const ManageDashboardsNew = React.memo(({ folder }: Props) => {
 
   return (
     <>
-      <div className="page-action-bar">
-        <div className="gf-form gf-form--grow m-r-2">
+      <div className={cx(styles.actionBar, 'page-action-bar')}>
+        <div className={cx(styles.inputWrapper, 'gf-form gf-form--grow m-r-2')}>
           <Input
             value={inputValue}
             onChange={onSearchQueryChange}
@@ -68,6 +68,16 @@ ManageDashboardsNew.displayName = 'ManageDashboardsNew';
 export default ManageDashboardsNew;
 
 const getStyles = (theme: GrafanaTheme2) => ({
+  actionBar: css`
+    ${theme.breakpoints.down('sm')} {
+      flex-wrap: wrap;
+    }
+  `,
+  inputWrapper: css`
+    ${theme.breakpoints.down('sm')} {
+      margin-right: 0 !important;
+    }
+  `,
   searchInput: css`
     margin-bottom: 6px;
     min-height: ${theme.spacing(4)};