From e6665ece0f30f8a2dbd6614e4380d5e2c8551eb7 Mon Sep 17 00:00:00 2001
From: Graham McIntie <graham@mcintire.me>
Date: Sun, 15 Feb 2026 15:23:32 -0600
Subject: [PATCH] Improve dashboard status bar mobile layout

- Use 2-column grid on mobile, flex-wrap on sm+
- Hide pipe separators on mobile (they break when items wrap)
- Stats now flow cleanly in a grid on small screens
---
 lib/towerops_web/live/dashboard_live.html.heex | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/lib/towerops_web/live/dashboard_live.html.heex b/lib/towerops_web/live/dashboard_live.html.heex
index a20253f9..9d28bce7 100644
--- a/lib/towerops_web/live/dashboard_live.html.heex
+++ b/lib/towerops_web/live/dashboard_live.html.heex
@@ -115,7 +115,7 @@
     <%!-- ═══════════════════════════════════════════════
          CONDENSED STATUS BAR — single dense line
          ═══════════════════════════════════════════════ --%>
-    <div class="mt-4 flex flex-wrap items-center gap-1 rounded-md border border-gray-200 bg-gray-50 px-1 py-1 dark:border-white/10 dark:bg-gray-800/80 font-mono text-xs">
+    <div class="mt-4 grid grid-cols-2 gap-0.5 rounded-md border border-gray-200 bg-gray-50 px-1 py-1 dark:border-white/10 dark:bg-gray-800/80 font-mono text-xs sm:flex sm:flex-wrap sm:items-center sm:gap-1">
       <%!-- Health --%>
       <div class={[
         "flex items-center gap-1.5 rounded px-2.5 py-1.5",
@@ -146,7 +146,7 @@
         </span>
       </div>
 
-      <span class="text-gray-300 dark:text-gray-600">│</span>
+      <span class="hidden text-gray-300 dark:text-gray-600 sm:inline">│</span>
 
       <%!-- Uptime --%>
       <div class="flex items-center gap-1.5 px-2.5 py-1.5">
@@ -166,7 +166,7 @@
         <% end %>
       </div>
 
-      <span class="text-gray-300 dark:text-gray-600">│</span>
+      <span class="hidden text-gray-300 dark:text-gray-600 sm:inline">│</span>
 
       <%!-- Alerts --%>
       <.link
@@ -190,7 +190,7 @@
       </.link>
 
       <%= if @current_scope.organization.use_sites && @sites_count > 0 do %>
-        <span class="text-gray-300 dark:text-gray-600">│</span>
+        <span class="hidden text-gray-300 dark:text-gray-600 sm:inline">│</span>
         <.link
           navigate={~p"/sites"}
           class="flex items-center gap-1.5 px-2.5 py-1.5 rounded hover:bg-gray-200/50 dark:hover:bg-white/5 transition"
@@ -203,7 +203,7 @@
       <% end %>
 
       <%= if @has_subscribers do %>
-        <span class="text-gray-300 dark:text-gray-600">│</span>
+        <span class="hidden text-gray-300 dark:text-gray-600 sm:inline">│</span>
         <div class="flex items-center gap-1.5 px-2.5 py-1.5">
           <span class="text-gray-500 dark:text-gray-400 text-[10px] uppercase font-sans font-medium">
             Subs
@@ -217,7 +217,7 @@
         </div>
 
         <%= if mrr_at_risk_positive?(@impact_summary.mrr_at_risk) do %>
-          <span class="text-gray-300 dark:text-gray-600">│</span>
+          <span class="hidden text-gray-300 dark:text-gray-600 sm:inline">│</span>
           <div class="flex items-center gap-1.5 px-2.5 py-1.5 bg-red-100/80 dark:bg-red-900/30 rounded">
             <span class="text-red-500 dark:text-red-400 text-[10px] uppercase font-sans font-medium">
               At Risk
@@ -235,7 +235,7 @@
       <% end %>
 
       <%!-- Insights count --%>
-      <span class="text-gray-300 dark:text-gray-600">│</span>
+      <span class="hidden text-gray-300 dark:text-gray-600 sm:inline">│</span>
       <.link
         navigate={~p"/insights"}
         class="flex items-center gap-1.5 px-2.5 py-1.5 rounded hover:bg-gray-200/50 dark:hover:bg-white/5 transition"