bernard/RosterChief
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix the claims page's mismatched control heights, and separate approve/reject

Browse Source 
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>
This commit is contained in:
Bernard Siebens
2026-08-11 18:40:52 +02:00
parent cb7f56709b
commit b2657bb15d
4 changed files with 39 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
management/templates/management/parent_claim_list.html
View File

@@ -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>