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)};