From 9e8d598715fe67b0a0208c1e5672e9fdf4aa3bb6 Mon Sep 17 00:00:00 2001
From: Sergio Mira <sergiomiram@gmail.com>
Date: Thu, 22 Jan 2026 12:29:49 +0100
Subject: [PATCH] Remove global span tag CSS, add title to table supervisor
 list counts and remove extra closing div tag

---
 app/javascript/src/dashboard.js       |  6 +++---
 app/views/casa_admins/index.html.erb  |  1 -
 app/views/supervisors/index.html.erb  | 14 +++++++-------
 public/assets/css/main.css            | 13 +++++++++----
 spec/system/supervisors/index_spec.rb |  8 ++++----
 5 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/app/javascript/src/dashboard.js b/app/javascript/src/dashboard.js
index 7db962db98..56989d3493 100644
--- a/app/javascript/src/dashboard.js
+++ b/app/javascript/src/dashboard.js
@@ -455,7 +455,7 @@ $(() => { // JQuery's callback for the DOM loading
           const activeContactElement = activeContactVolunteers
             ? (
             `
-            <span class="attempted-contact status-btn success-bg text-white pl-${activeContactVolunteers * 15} pr-${activeContactVolunteers * 15}">
+            <span class="attempted-contact supervisor-stat success-bg text-white pl-${activeContactVolunteers * 15} pr-${activeContactVolunteers * 15}" title="Number of Volunteers attempting contact (within 2 weeks)">
               ${activeContactVolunteers}
             </span>
             `
@@ -465,7 +465,7 @@ $(() => { // JQuery's callback for the DOM loading
           const noContactElement = noContactVolunteers > 0
             ? (
             `
-            <span class="no-attempted-contact status-btn danger-bg text-white pl-${noContactVolunteers * 15} pr-${noContactVolunteers * 15}">
+            <span class="no-attempted-contact supervisor-stat danger-bg text-white pl-${noContactVolunteers * 15} pr-${noContactVolunteers * 15}" title="Number of Volunteers not attempting contact (within 2 weeks)">
               ${noContactVolunteers}
             </span>
             `
@@ -476,7 +476,7 @@ $(() => { // JQuery's callback for the DOM loading
           if (activeContactVolunteers <= 0 && noContactVolunteers <= 0) {
             volunteersCounterElement = '<span class="no-volunteers" style="flex-grow: 1">No assigned volunteers</span>'
           } else {
-            volunteersCounterElement = `<span class="status-btn deactive-bg text-black pl-${transitionAgedCaseVolunteers * 15} pr-${transitionAgedCaseVolunteers * 15}">${transitionAgedCaseVolunteers}</span>`
+            volunteersCounterElement = `<span class="supervisor-stat deactive-bg text-black pl-${transitionAgedCaseVolunteers * 15} pr-${transitionAgedCaseVolunteers * 15}" title="Count of Transition Aged Youth">${transitionAgedCaseVolunteers}</span>`
           }
 
           return `
diff --git a/app/views/casa_admins/index.html.erb b/app/views/casa_admins/index.html.erb
index 0ff1e8ae65..91e26740b1 100644
--- a/app/views/casa_admins/index.html.erb
+++ b/app/views/casa_admins/index.html.erb
@@ -58,4 +58,3 @@
     </div>
   </div>
 </div>
-</div>
diff --git a/app/views/supervisors/index.html.erb b/app/views/supervisors/index.html.erb
index a28d8e1131..29b597afe5 100644
--- a/app/views/supervisors/index.html.erb
+++ b/app/views/supervisors/index.html.erb
@@ -48,9 +48,9 @@
       <div class="card-style mb-30">
         <h6 class="mb-10">Legend for Supervisor List</h6>
         <p class="text-sm mb-20">
-          <span class="status-btn success-bg text-white mb-10">Number of Volunteers attempting contact (within 2 weeks)</span><br>
-          <span class="status-btn danger-bg text-white mb-10">Number of Volunteers not attempting contact (within 2 weeks)</span><br>
-          <span class="status-btn deactive-bg text-black">Count of Transition Aged Youth</span>
+          <span class="supervisor-stat success-bg text-white mb-10">Number of Volunteers attempting contact (within 2 weeks)</span><br>
+          <span class="supervisor-stat danger-bg text-white mb-10">Number of Volunteers not attempting contact (within 2 weeks)</span><br>
+          <span class="supervisor-stat deactive-bg text-black">Count of Transition Aged Youth</span>
         </p>
         <div class="table-wrapper table-responsive">
           <table
@@ -78,10 +78,10 @@
 
                     <div class="d-flex flex-row w-100">
                       <% if active_volunteers %>
-                        <div class="status-btn success-bg text-white flex-grow-1" style="max-width: <%= (active_volunteers * 15) %>%; text-align: center"><%= active_volunteers %></div>
+                        <div class="supervisor-stat success-bg text-white flex-grow-1" style="max-width: <%= (active_volunteers * 15) %>%; text-align: center"><%= active_volunteers %></div>
                       <% end %>
                       <% if no_attempt_volunteers.nonzero? %>
-                        <div class="status-btn danger-bg text-white flex-grow-1" style="max-width: <%= (no_attempt_volunteers * 15) %>%; text-align: center"><%= no_attempt_volunteers %></div>
+                        <div class="supervisor-stat danger-bg text-white flex-grow-1" style="max-width: <%= (no_attempt_volunteers * 15) %>%; text-align: center"><%= no_attempt_volunteers %></div>
                       <% else %>
                         <div class="flex-grow-1"></div>
                       <% end %>
@@ -89,9 +89,9 @@
 
                     <div class="d-flex flex-row py-2" style="max-width: 50%;">
                       <% if !(active_volunteers || no_attempt_volunteers.nonzero?) %>
-                        <div class="status-btn bg-secondary text-white">No assigned volunteers</div>
+                        <div class="supervisor-stat bg-secondary text-white">No assigned volunteers</div>
                       <% else %>
-                        <div class="status-btn deactive-bg text-black" style="width:<%= (transition_volunteers * 15) %>; % text-align: center">
+                        <div class="supervisor-stat deactive-bg text-black" style="width:<%= (transition_volunteers * 15) %>; % text-align: center">
                           <%= transition_volunteers %>
                         </div>
                       <% end %>
diff --git a/public/assets/css/main.css b/public/assets/css/main.css
index 2086099eb5..57b314ce3a 100644
--- a/public/assets/css/main.css
+++ b/public/assets/css/main.css
@@ -54,9 +54,6 @@ i,
 a {
   display: inline-block; }
 
-span {
-    display: block; }
-}
 audio,
 canvas,
 iframe,
@@ -3859,4 +3856,12 @@ h6,
   font-weight: 800; }
 
 .fw-900 {
-  font-weight: 900; }
\ No newline at end of file
+  font-weight: 900; }
+
+/* ====== Supervisor Stats ====== */
+.supervisor-stat {
+  display: block;
+  padding: 7px 15px;
+  border-radius: 30px;
+  font-size: 14px;
+  font-weight: 400; }
\ No newline at end of file
diff --git a/spec/system/supervisors/index_spec.rb b/spec/system/supervisors/index_spec.rb
index abda3b3386..189539ee30 100644
--- a/spec/system/supervisors/index_spec.rb
+++ b/spec/system/supervisors/index_spec.rb
@@ -363,7 +363,7 @@
       expect(active_contact_element).to match_css(".pr-#{active_contacts_expected * 15}")
       expect(no_active_contact_element).to have_text(no_active_contacts_expected)
       expect(no_active_contact_element).to match_css(".pl-#{no_active_contacts_expected * 15}")
-      expect(supervisor_stats.find(".status-btn.deactive-bg")).to have_text(transition_aged_youth_expected)
+      expect(supervisor_stats.find(".supervisor-stat.deactive-bg")).to have_text(transition_aged_youth_expected)
     end
 
     it "shows the correct volunteers for the second supervisor with both volunteer types", :js do
@@ -381,7 +381,7 @@
       expect(active_contact_element).to match_css(".pr-#{active_contacts_expected * 15}")
       expect(no_active_contact_element).to have_text(no_active_contacts_expected)
       expect(no_active_contact_element).to match_css(".pl-#{no_active_contacts_expected * 15}")
-      expect(supervisor_stats.find(".status-btn.deactive-bg")).to have_text(transition_aged_youth_expected)
+      expect(supervisor_stats.find(".supervisor-stat.deactive-bg")).to have_text(transition_aged_youth_expected)
     end
 
     it "shows the correct element for a supervisor with only contact volunteers", :js do
@@ -395,7 +395,7 @@
 
       expect(active_contact_element).to have_text(active_contacts_expected)
       expect(active_contact_element).to match_css(".pl-#{active_contacts_expected * 15}")
-      expect(supervisor_stats.find(".status-btn.deactive-bg")).to have_text(transition_aged_youth_expected)
+      expect(supervisor_stats.find(".supervisor-stat.deactive-bg")).to have_text(transition_aged_youth_expected)
       expect(supervisor_stats).not_to have_css("span.no-attempted-contact")
     end
 
@@ -410,7 +410,7 @@
 
       expect(no_contact_element).to have_text(no_contacts_expected)
       expect(no_contact_element).to match_css(".pl-#{no_contacts_expected * 15}")
-      expect(supervisor_stats.find(".status-btn.deactive-bg")).to have_text(transition_aged_youth_expected)
+      expect(supervisor_stats.find(".supervisor-stat.deactive-bg")).to have_text(transition_aged_youth_expected)
       expect(supervisor_stats).not_to have_css("span.attempted-contact")
       expect(supervisor_stats).not_to have_css("span.attempted-contact-end")
     end