From 40eedc8156fc14afb6376a1822642053cb090b27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sun, 27 Oct 2019 07:59:06 +0000
Subject: [PATCH] fix(ui): silence browser controls should switch from row to
 columns on small screen

---
 ui/src/Components/SilenceModal/Browser/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/Components/SilenceModal/Browser/index.js b/ui/src/Components/SilenceModal/Browser/index.js
index ccc5604e4..a42150916 100644
--- a/ui/src/Components/SilenceModal/Browser/index.js
+++ b/ui/src/Components/SilenceModal/Browser/index.js
@@ -162,7 +162,7 @@ const Browser = observer(
       return (
         <React.Fragment>
           <div
-            className="d-flex justify-content-between mb-3"
+            className="d-flex flex-fill flex-lg-row flex-column justify-content-between mb-3"
             data-refresh={settingsStore.fetchConfig.config.interval}
           >
             <span className="custom-control custom-switch my-auto flex-grow-0 flex-shrink-0">
@@ -186,7 +186,7 @@ const Browser = observer(
             </span>
             <input
               type="text"
-              className="form-control flex-grow-1 flex-shrink-1 mx-3"
+              className="form-control flex-grow-1 flex-shrink-1 mx-lg-3 mx-0 my-lg-0 my-2"
               placeholder="Search query"
               value={this.dataSource.searchTerm}
               autoComplete="off"