Fix scrambled mobile layout on member detail and sweep the rest of the app
The mobile responsive pass still had real gaps: on member_detail.html, dt/dd label-value rows (phone numbers, dates) squeezed onto one line below `sm` instead of stacking, and guardian call/emergency-call buttons -- whose labels embed the guardian's name -- used a bare `grow` inside a non-wrapping flex row, pushing the whole row off screen once a name was long enough. Both patterns are fixed here and propagated to every other page with the same shape of bug: event_detail.html and event_series_detail.html still had the unmigrated dt/dd rows from before the first pass; sponsor_list.html's URLs and parent_claim_list.html's emails could force a table-card wider than the viewport (unbreakable strings, fixed with break-all); parent_claim_list.html's Approve/Reject buttons could both land on the left edge once the row wrapped (fixed with ms-auto); news_list.html's team-badge list and news_detail.html's per-photo action buttons were missing flex-wrap; team_detail.html had a stray table never converted to table-cards and two unstacked stat lists; referee_management.html's per-game referee badges were missing flex-wrap. Also hide the three dashboard charts (signups, fee status, renewal rate) below `lg` -- three squeezed canvases stacked on a phone added scroll without adding readability the stat cards above don't already give, and match family_list.html's search box to member_list.html's icon-only-below-`sm` pattern. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -68,7 +68,7 @@
|
||||
<span class="badge badge-success badge-sm absolute top-1 left-1">{% trans "Main" %}</span>
|
||||
{% endif %}
|
||||
{% if can_edit %}
|
||||
<div class="flex gap-1 mt-1">
|
||||
<div class="flex flex-wrap gap-1 mt-1">
|
||||
{% if not photo.is_main %}
|
||||
<form method="post" action="{% url 'management:news_photo_set_main' news_item.pk photo.pk %}">
|
||||
{% csrf_token %}
|
||||
|
||||
Reference in New Issue
Block a user