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", () => {