From b2657bb15d04da2bfaa5eb8f52de52a5760a68ca Mon Sep 17 00:00:00 2001
From: Bernard Siebens <bernard@siebens.org>
Date: Tue, 11 Aug 2026 18:40:52 +0200
Subject: [PATCH] Fix the claims page's mismatched control heights, and
 separate approve/reject

Two things, found together while looking at the row of controls under each
pending claim.

The child dropdown stood taller than the btn-sm/input-sm around it because
ClaimReviewForm.child hardcoded its own class="select select-bordered w-full"
on the widget. templatetags/field.html's select branch already builds the
full class list itself (base classes + the size modifier), so the widget's
own class rendered as a second, non-merging class="..." attribute right next
to the generated one -- select-sm was in the markup, just shadowed by a
duplicate attribute the browser never applied. No other Select field in the
app hardcodes a class this way, which is why nothing else had the problem.
Fixed by dropping it and passing size="small" through {% form_field %}
instead, the same way every other compact inline select in the app does.

Also pulled Approve and Reject apart with justify-between rather than letting
both sit in one flex-wrap run, so they stay on opposite sides of the row
(and don't end up adjacent on a wrap) rather than one stray click apart.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../management/parent_claim_list.html         | 19 +++++++++++++++----
 management/tests.py                           | 16 ++++++++++++++++
 members/forms.py                              |  6 +++++-
 static/css/app.css                            |  3 +++
 4 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/management/templates/management/parent_claim_list.html b/management/templates/management/parent_claim_list.html
index 30e5e8b..96819ba 100644
--- a/management/templates/management/parent_claim_list.html
+++ b/management/templates/management/parent_claim_list.html
@@ -27,18 +27,29 @@
                         </div>
                     </div>
 
-                    <div class="flex flex-wrap items-end gap-2 mt-4">
+                    {% comment %}
+                        size="small" + show_label=False on the dropdown: {% form_field %}
+                        defaults to daisyUI's medium control height, taller than the btn-sm/
+                        input-sm used by everything else in this row -- without it the
+                        dropdown stands out against the buttons either side of it.
+
+                        justify-between (rather than everything in one flex-wrap run) keeps
+                        Approve and Reject apart even as the row wraps on a narrow screen --
+                        Approve stays pinned left, Reject right, so the two are never one
+                        stray click apart the way adjacent buttons would be.
+                    {% endcomment %}
+                    <div class="flex flex-wrap items-center justify-between gap-x-6 gap-y-2 mt-4">
                         {% if claim.has_candidates %}
-                            <form method="post" action="{% url 'management:parent_claim_approve' claim.pk %}" class="flex flex-wrap items-end gap-2">
+                            <form method="post" action="{% url 'management:parent_claim_approve' claim.pk %}" class="flex flex-wrap items-center gap-2">
                                 {% csrf_token %}
-                                <div class="min-w-64">{% form_field claim.review_form.child %}</div>
+                                <div class="min-w-64">{% form_field claim.review_form.child size="small" show_label=False %}</div>
                                 <button class="btn btn-primary btn-sm gap-2" type="submit">{% lucide "check" size=14 %} {% trans "Approve" %}</button>
                             </form>
                         {% else %}
                             <p class="text-sm opacity-70">{% trans "No child without a parent matches this. Check the spelling and the date of birth with them before rejecting." %}</p>
                         {% endif %}
 
-                        <form method="post" action="{% url 'management:parent_claim_reject' claim.pk %}" class="flex items-end gap-2">
+                        <form method="post" action="{% url 'management:parent_claim_reject' claim.pk %}" class="flex items-center gap-2">
                             {% csrf_token %}
                             <input type="text" name="note" class="input input-bordered input-sm" placeholder="{% trans 'Reason (optional)' %}">
                             <button class="btn btn-outline btn-error btn-sm gap-2" type="submit">{% lucide "x" size=14 %} {% trans "Reject" %}</button>
diff --git a/management/tests.py b/management/tests.py
index 6963400..b883c3b 100644
--- a/management/tests.py
+++ b/management/tests.py
@@ -1454,6 +1454,22 @@ class ParentClaimViewTests(ManagementTestBase):
         self.assertContains(response, "taylor.doe@example.com")
         self.assertContains(response, "Jamie Doe")
 
+    def test_the_child_dropdown_matches_the_height_of_the_buttons_beside_it(self):
+        # Regression: ClaimReviewForm.child used to hardcode its own class=
+        # attrs, which rendered a second class="..." on the <select> alongside
+        # the one templatetags/field.html builds (including the size modifier)
+        # -- the two never merge, so select-sm silently never reached the page
+        # and the dropdown stood taller than the btn-sm/input-sm around it.
+        self.submit()
+        self.client.force_login(self.admin_user)
+
+        response = self.club_get("parent_claim_list")
+
+        self.assertContains(response, "select-sm")
+        html = response.content.decode()
+        select_tag = html[html.index("<select") : html.index(">", html.index("<select"))]
+        self.assertEqual(select_tag.count('class="'), 1)
+
     def test_approving_links_the_parent_as_a_guardian(self):
         self.submit()
         claim = ParentClaim.objects.get(club=self.club)
diff --git a/members/forms.py b/members/forms.py
index 1fbfc33..39db1f5 100644
--- a/members/forms.py
+++ b/members/forms.py
@@ -29,7 +29,11 @@ class ClaimReviewForm(forms.Form):
     never quietly re-parent a child who already has one.
     """
 
-    child = forms.ModelChoiceField(queryset=None, label=_("Link to"), widget=forms.Select(attrs={"class": "select select-bordered w-full"}))
+    # No hardcoded "class" here -- templatetags/field.html's own select branch
+    # already builds the full class list (including the size modifier), and a
+    # class baked into the widget attrs would render a second, conflicting
+    # class="..." on the <select> alongside it rather than merging with it.
+    child = forms.ModelChoiceField(queryset=None, label=_("Link to"), widget=forms.Select())
 
     def __init__(self, *args, candidates=None, **kwargs):
         super().__init__(*args, **kwargs)
diff --git a/static/css/app.css b/static/css/app.css
index fde5952..59374ae 100644
--- a/static/css/app.css
+++ b/static/css/app.css
@@ -3773,6 +3773,9 @@
   .gap-x-4 {
     column-gap: calc(var(--spacing) * 4);
   }
+  .gap-x-6 {
+    column-gap: calc(var(--spacing) * 6);
+  }
   .gap-y-2 {
     row-gap: calc(var(--spacing) * 2);
   }