From cb04cdd1d9fb528cde84cdae8c2ebf5d02bbcbe1 Mon Sep 17 00:00:00 2001
From: Graham McIntire <graham@mcintire.me>
Date: Wed, 6 May 2026 17:38:32 -0500
Subject: [PATCH] fix(coverage): align progress percentage with bar, not title

---
 .../live/coverage_live/show.html.heex         | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/lib/towerops_web/live/coverage_live/show.html.heex b/lib/towerops_web/live/coverage_live/show.html.heex
index 88552356..6d8719f2 100644
--- a/lib/towerops_web/live/coverage_live/show.html.heex
+++ b/lib/towerops_web/live/coverage_live/show.html.heex
@@ -38,26 +38,28 @@
 
   <%= if @coverage.status == "computing" do %>
     <div class="mb-6 rounded-lg border border-yellow-200 bg-yellow-50 dark:border-yellow-900/50 dark:bg-yellow-900/20 p-4">
-      <div class="flex items-center gap-3">
+      <div class="flex items-start gap-3">
         <.icon
           name="hero-arrow-path"
-          class="h-5 w-5 text-yellow-700 dark:text-yellow-400 animate-spin"
+          class="h-5 w-5 text-yellow-700 dark:text-yellow-400 animate-spin shrink-0"
         />
         <div class="flex-1">
           <p class="text-sm font-medium text-yellow-900 dark:text-yellow-200">
             {t("Computing coverage…")}
           </p>
-          <div class="mt-1 h-2 w-full bg-yellow-200 dark:bg-yellow-900 rounded-full overflow-hidden">
-            <div
-              class="h-full bg-yellow-600 dark:bg-yellow-500 transition-all"
-              style={"width: #{@coverage.progress_pct}%"}
-            >
+          <div class="mt-1 flex items-center gap-3">
+            <div class="flex-1 h-2 bg-yellow-200 dark:bg-yellow-900 rounded-full overflow-hidden">
+              <div
+                class="h-full bg-yellow-600 dark:bg-yellow-500 transition-all"
+                style={"width: #{@coverage.progress_pct}%"}
+              >
+              </div>
             </div>
+            <span class="text-sm text-yellow-800 dark:text-yellow-300 font-mono shrink-0">
+              {@coverage.progress_pct}%
+            </span>
           </div>
         </div>
-        <span class="text-sm text-yellow-800 dark:text-yellow-300 font-mono">
-          {@coverage.progress_pct}%
-        </span>
       </div>
     </div>
   <% end %>