Widen News' filter row, drop nested count badges; row Attendance/Documents/Referee cards

News list: the left pane is wider (380px -> 460px) so the four status chips
fit on one line, and each chip's count is now plain text in the pill itself
("All 42") rather than a nested badge -- matches D8's own "All 42 / Drafts 3"
wording literally. Member detail: Attendance, Documents and Referee
eligibility now sit side by side in one row instead of stacking as three
full-width cards.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ECGMEwrc2k4D8VQuwjstj9

management/templates/management/member_detail.html

@@ -167,20 +167,22 @@
         </div>
     </div>
 
+    {# Attendance, Documents and Referee eligibility side by side rather than three full-width rows -- h-full keeps them matched in height regardless of which has more content. #}
+    <div class="grid grid-cols-1 gap-4 lg:grid-cols-3 mt-4">
         {% if show_attendance %}
             {# D7's season card: a 12-bar attendance sparkline (present/absent/upcoming, oldest first) beside the season's Present/Absent/No-reply totals. #}
-        <div class="card card-body mt-4">
+            <div class="card card-body h-full">
                 <h2 class="card-title">{% lucide "calendar-check" size=18 %} {% trans "Attendance" %}</h2>
                 {% if not attendance_sparkline %}
                     <p class="text-sm text-muted">{% trans "No events yet this season." %}</p>
                 {% else %}
-                <div class="flex flex-wrap items-center gap-8">
+                    <div class="flex flex-wrap items-center gap-6">
                         <div class="attendance-sparkline">
                             {% for bar in attendance_sparkline %}
                                 <span class="attendance-bar attendance-bar-{{ bar.state }}" title="{{ bar.event.title }} — {{ bar.event.start|date:"j M" }}"></span>
                             {% endfor %}
                         </div>
-                    <div class="flex gap-6">
+                        <div class="flex gap-4">
                             <div>
                                 <div class="font-display text-2xl leading-none font-extrabold text-ok tabular-nums">{{ attendance_counts.present }}</div>
                                 <div class="mt-1 font-display text-[11px] font-bold tracking-[.1em] text-muted uppercase">{% trans "Present" %}</div>
@@ -206,7 +208,7 @@
             see the module docstring on club/services/onboarding.py for why this stays
             separate from ClubMembership.status/fee_status.
         {% endcomment %}
-    <div class="card card-body mt-4">
+        <div class="card card-body h-full">
             <h2 class="card-title">{% lucide "clipboard-check" size=18 %} {% trans "Documents" %}</h2>
             {% if not current_membership %}
                 <p class="text-sm text-muted">{% trans "Not rostered for the current season -- nothing to check off yet." %}</p>
@@ -253,7 +255,7 @@
         </div>
 
         {% if referee_profile or is_club_admin %}
-        <div class="card card-body mt-4">
+            <div class="card card-body h-full">
                 <div class="flex flex-wrap items-center justify-between gap-2">
                     <h2 class="card-title">{% lucide "flag" size=18 %} {% trans "Referee eligibility" %}</h2>
                     {% if is_club_admin %}
@@ -301,6 +303,8 @@
                     <p class="text-sm text-muted">{% trans "Not eligible to referee for any team." %}</p>
                 {% endif %}
             </div>
+        {% endif %}
+    </div>
 
     {% if is_club_admin %}
         {% url 'management:member_referee_eligibility_update' member.pk as referee_eligibility_url %}
@@ -308,7 +312,6 @@
         {% trans "Save" as save_label %}
         {% include "controlpanel/_modal_form.html" with modal_id="referee_eligibility_modal" title=referee_eligibility_title form=referee_eligibility_form action_url=referee_eligibility_url submit_label=save_label submit_icon="save" %}
     {% endif %}
-    {% endif %}
 
     {% trans "Add parent" as add_parent_label %}
     {% trans "Add child" as add_child_label %}

management/templates/management/news_list.html

@@ -11,13 +11,13 @@
 
 {% block panel %}
     <div class="flex items-start gap-4">
-        <div class="flex w-[380px] shrink-0 flex-col gap-3">
+        <div class="flex w-[460px] shrink-0 flex-col gap-3">
-            {# D8's filter chips -- All/Drafts/Scheduled, plus Published for symmetry with the statuses this app actually has. #}
+            {# D8's filter chips -- "All 42 / Drafts 3 / Scheduled 1", a raw number in the pill's own text, not a nested badge. Plus Published for symmetry with the statuses this app actually has. #}
-            <div class="flex flex-wrap gap-1.5">
+            <div class="flex flex-nowrap gap-1.5">
-                <a href="{% querystring status=None selected=None page=None %}" class="btn btn-sm gap-1.5 {% if status_filter == "all" %}btn-primary{% else %}btn-outline{% endif %}">{% trans "All" %} <span class="badge badge-sm badge-ghost">{{ counts.all }}</span></a>
+                <a href="{% querystring status=None selected=None page=None %}" class="btn btn-sm {% if status_filter == "all" %}btn-primary{% else %}btn-outline{% endif %}">{% trans "All" %} {{ counts.all }}</a>
-                <a href="{% querystring status="draft" selected=None page=None %}" class="btn btn-sm gap-1.5 {% if status_filter == "draft" %}btn-primary{% else %}btn-outline{% endif %}">{% trans "Drafts" %} <span class="badge badge-sm badge-ghost">{{ counts.draft }}</span></a>
+                <a href="{% querystring status="draft" selected=None page=None %}" class="btn btn-sm {% if status_filter == "draft" %}btn-primary{% else %}btn-outline{% endif %}">{% trans "Drafts" %} {{ counts.draft }}</a>
-                <a href="{% querystring status="scheduled" selected=None page=None %}" class="btn btn-sm gap-1.5 {% if status_filter == "scheduled" %}btn-primary{% else %}btn-outline{% endif %}">{% trans "Scheduled" %} <span class="badge badge-sm badge-ghost">{{ counts.scheduled }}</span></a>
+                <a href="{% querystring status="scheduled" selected=None page=None %}" class="btn btn-sm {% if status_filter == "scheduled" %}btn-primary{% else %}btn-outline{% endif %}">{% trans "Scheduled" %} {{ counts.scheduled }}</a>
-                <a href="{% querystring status="published" selected=None page=None %}" class="btn btn-sm gap-1.5 {% if status_filter == "published" %}btn-primary{% else %}btn-outline{% endif %}">{% trans "Published" %} <span class="badge badge-sm badge-ghost">{{ counts.published }}</span></a>
+                <a href="{% querystring status="published" selected=None page=None %}" class="btn btn-sm {% if status_filter == "published" %}btn-primary{% else %}btn-outline{% endif %}">{% trans "Published" %} {{ counts.published }}</a>
             </div>
 
             <div class="card overflow-hidden divide-y">

static/css/app.css

@@ -3795,6 +3795,9 @@
   .w-\[380px\] {
     width: 380px;
   }
+  .w-\[460px\] {
+    width: 460px;
+  }
   .w-auto {
     width: auto;
   }