Factor the avatar-initials circle into a shared partial

mobile/templates/mobile/_avatar.html replaces four copies of the same
rounded-full/font-display/initials-slicing markup across event_detail.html,
me.html (the account's own header avatar and each "People I manage" row),
and news_detail.html's byline -- size/text/background stay parameterized
per call site so nothing changes visually.

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

mobile/templates/mobile/_avatar.html

@@ -0,0 +1,11 @@
+{% comment %}
+    Avatar-initials circle -- the one idiom repeated across every M-screen
+    (event_detail's "Your answers" rows, me.html's own header + "People I
+    manage" rows, news_detail's byline). Expects ``person`` (anything with
+    first_name/last_name) in scope; all other vars are optional and default
+    to the most common case (me.html's "People I manage" rows):
+      - size_class: the h-*/w-* pair, default "h-10 w-10"
+      - text_class: the initials' font size, default "text-sm"
+      - bg_class: the circle's background, default "bg-steel"
+{% endcomment %}
+<span class="flex {{ size_class|default:"h-10 w-10" }} shrink-0 items-center justify-center rounded-full {{ bg_class|default:"bg-steel" }} font-display {{ text_class|default:"text-sm" }} font-extrabold text-white">{{ person.first_name|slice:":1" }}{{ person.last_name|slice:":1" }}</span>

mobile/templates/mobile/event_detail.html

@@ -50,7 +50,7 @@
                     {% if not forloop.first %}<div class="h-px bg-rule"></div>{% endif %}
                     <div>
                         <div class="mb-2 flex items-center gap-2.5">
-                            <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-steel font-display text-sm font-extrabold text-white">{{ answer.member.first_name|slice:":1" }}{{ answer.member.last_name|slice:":1" }}</span>
+                            {% include "mobile/_avatar.html" with person=answer.member size_class="h-8 w-8" %}
                             <div class="min-w-0 flex-1">
                                 <div class="text-[15px] font-semibold text-ink">{{ answer.member.get_full_name }}</div>
                                 {% if answer.membership %}

mobile/templates/mobile/me.html

@@ -19,7 +19,7 @@
         </div>
     {% else %}
         <div class="-mx-4 -mt-4 flex items-center gap-3 bg-ink px-4 pt-4 pb-5 text-white">
-            <span class="flex h-14 w-14 shrink-0 items-center justify-center rounded-full bg-club font-display text-xl font-extrabold text-white">{{ me.first_name|slice:":1" }}{{ me.last_name|slice:":1" }}</span>
+            {% include "mobile/_avatar.html" with person=me size_class="h-14 w-14" text_class="text-xl" bg_class="bg-club" %}
             <div class="min-w-0 flex-1">
                 <div class="font-display text-xl leading-none font-extrabold uppercase">{{ me.get_full_name }}</div>
                 {% if member_since or team_manager_label %}
@@ -38,7 +38,7 @@
                 {% for row in people_rows %}
                     {% if not forloop.first %}<div class="h-px bg-rule"></div>{% endif %}
                     <a class="flex items-center gap-3 p-3.5" href="{% url "mobile:edit_profile" row.person.pk %}">
-                        <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-steel font-display text-sm font-extrabold text-white">{{ row.person.first_name|slice:":1" }}{{ row.person.last_name|slice:":1" }}</span>
+                        {% include "mobile/_avatar.html" with person=row.person %}
                         <div class="min-w-0 flex-1">
                             <div class="text-[15px] font-semibold text-ink">
                                 {{ row.person.get_full_name }}

mobile/templates/mobile/news_detail.html

@@ -44,7 +44,7 @@
 
         <div class="flex items-center gap-2.5 border-t border-line pt-3.5">
             {% if news_item.created_by %}
-                <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-navy font-display text-sm font-extrabold text-white">{{ news_item.created_by.first_name|slice:":1" }}{{ news_item.created_by.last_name|slice:":1" }}</span>
+                {% include "mobile/_avatar.html" with person=news_item.created_by size_class="h-9 w-9" bg_class="bg-navy" %}
                 <span class="flex-1 text-sm font-semibold text-ink">{% blocktrans with name=news_item.created_by.get_full_name %}Posted by {{ name }}{% endblocktrans %}</span>
             {% else %}
                 <span class="flex-1"></span>