diff --git a/src/layout/nav/ConnectionIndicator.less b/src/layout/nav/ConnectionIndicator.less
index 8122af0..2a65416 100644
--- a/src/layout/nav/ConnectionIndicator.less
+++ b/src/layout/nav/ConnectionIndicator.less
@@ -29,3 +29,10 @@
     box-shadow: 0 0 0 3px rgba(@kw-red, 0.3);
   }
 }
+
+.site-header-element.connection-indicator-el {
+  // Hide the connection indicator entirely on very small screens
+  @media (max-width: 350px) {
+    display: none !important;
+  }
+}
diff --git a/src/layout/nav/ConnectionIndicator.tsx b/src/layout/nav/ConnectionIndicator.tsx
index c27f274..385162f 100644
--- a/src/layout/nav/ConnectionIndicator.tsx
+++ b/src/layout/nav/ConnectionIndicator.tsx
@@ -21,7 +21,7 @@
   const { t } = useTranslation();
   const connectionState = useSelector((s: RootState) => s.websocket.connectionState);
 
-  return <div className="site-header-element">
+  return <div className="site-header-element connection-indicator-el">
     <Tooltip title={t(CONN_STATE_TOOLTIPS[connectionState])} placement="bottom">
       <div className={"connection-indicator connection-" + connectionState} />
     </Tooltip>