feat: Enhance supervision page with collapsible group sections for better organization

Co-authored-by: Copilot <copilot@github.com>

atlas/templates/atlas/supervision.html

@@ -1,6 +1,14 @@
 {% extends 'atlas/exams.html' %}
 {% load static %}
 
+{% block css %}
+{{ block.super }}
+<style>
+.collapse-chevron { transition: transform .2s ease; }
+[aria-expanded="true"] .collapse-chevron { transform: rotate(-180deg); }
+</style>
+{% endblock %}
+
 {% block content %}
     <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-3">
         <div>
@@ -72,8 +80,14 @@
     {# ---- Grouped results ---- #}
     {% if groups %}
         {% for group_label, attempt_rows in groups %}
-            <div class="mb-4">
+            <div class="mb-3">
-                <h5 class="h6 fw-semibold border-bottom pb-1 mb-2">
+                <button class="btn btn-link text-start text-decoration-none w-100 p-0 border-bottom pb-1 mb-0 collapsed"
+                        type="button"
+                        data-bs-toggle="collapse"
+                        data-bs-target="#group-{{ forloop.counter }}"
+                        aria-expanded="false"
+                        aria-controls="group-{{ forloop.counter }}">
+                    <h5 class="h6 fw-semibold d-inline mb-0">
                         {% if group_by == 'user' %}
                             <i class="bi bi-person me-1" aria-hidden="true"></i>
                         {% else %}
@@ -82,7 +96,10 @@
                         {{ group_label }}
                         <span class="badge bg-secondary fw-normal ms-1">{{ attempt_rows|length }} attempt{{ attempt_rows|length|pluralize }}</span>
                     </h5>
-                <div class="table-responsive">
+                    <i class="bi bi-chevron-down ms-2 small collapse-chevron" aria-hidden="true"></i>
+                </button>
+                <div class="collapse" id="group-{{ forloop.counter }}">
+                <div class="table-responsive mt-2">
                     <table class="table table-hover table-sm align-middle mb-0">
                         <thead class="table-dark">
                             <tr>
@@ -146,6 +163,7 @@
                         </tbody>
                     </table>
                 </div>
+                </div>{# /collapse #}
             </div>
         {% endfor %}
     {% else %}