From 559870b8614e74d7dbf8cec8f0d66cd67bba553d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Fri, 19 Jul 2019 16:25:46 +0100
Subject: [PATCH] chore(ui): switch to column render for navbar icons with only
 1 filter

---
 ui/src/Components/NavBar/index.js      | 4 ++--
 ui/src/Components/NavBar/index.test.js | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/src/Components/NavBar/index.js b/ui/src/Components/NavBar/index.js
index 83e8a03e1..79def03c2 100644
--- a/ui/src/Components/NavBar/index.js
+++ b/ui/src/Components/NavBar/index.js
@@ -109,11 +109,11 @@ const NavBar = observer(
     render() {
       const { alertStore, settingsStore, silenceFormStore } = this.props;
 
-      // if we have at least 2 filters then it's likely that filter input will
+      // if we have at least 1 filter then it's likely that filter input will
       // use 2 lines, so set right side icons on small screeens to column mode
       // for more compact layout
       const flexClass =
-        alertStore.filters.values.length >= 2
+        alertStore.filters.values.length >= 1
           ? "flex-column flex-sm-column flex-md-row flex-lg-row flex-xl-row"
           : "flex-row";
 
diff --git a/ui/src/Components/NavBar/index.test.js b/ui/src/Components/NavBar/index.test.js
index b26970b75..ae2347ca7 100644
--- a/ui/src/Components/NavBar/index.test.js
+++ b/ui/src/Components/NavBar/index.test.js
@@ -64,7 +64,7 @@ describe("<NavBar />", () => {
   });
 
   it("navbar-nav includes 'flex-row' class with 1 filter", () => {
-    ValidateNavClass(1, "flex-row");
+    ValidateNavClass(1, "flex-column");
   });
 
   it("navbar-nav includes 'flex-column' class with 2 filters", () => {