graham/towerops
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve dashboard status bar mobile layout

Browse source 
- 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
This commit is contained in:
Graham McIntire 2026-02-15 15:23:32 -06:00
parent b291c3a93f
commit e6665ece0f
1 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
lib/towerops_web/live/dashboard_live.html.heex
View file

@ -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"