styled more of Most Recent applet, allowing for scrolling of 36 most recent events and Load More link

src/templates/apps/billboard/_partials/_applet-billboard-most-recent.html

@@ -1,3 +1,4 @@
+{% load lyric_extras %}
 <section
     id="id_applet_billboard_most_recent"
     style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
@@ -5,10 +6,29 @@
     <h2>Most Recent</h2>
     {% if recent_room %}
         <a href="{% url 'billboard:scroll' recent_room.id %}" class="most-recent-room-link">{{ recent_room.name }}</a>
-        {% with events=recent_events %}
-            {% include "core/_partials/_scroll.html" %}
-        {% endwith %}
+        <section id="id_drama_scroll" class="drama-scroll">
+            <a href="{% url 'billboard:scroll' recent_room.id %}" class="most-recent-load-more">Load more….</a>
+            {% for event in recent_events %}
+                <div class="drama-event {% if event.actor == viewer %}mine{% else %}theirs{% endif %}">
+                    <span class="event-body">
+                        <strong>{{ event.actor|display_name }}</strong>
+                        {{ event.to_prose }}<br>
+                        <time class="event-time" datetime="{{ event.timestamp|date:'c' }}">
+                            {{ event.timestamp|date:"N j, g:i a" }}
+                        </time>
+                    </span>
+                </div>
+            {% empty %}
+                <p class="event-empty"><small>No events yet.</small></p>
+            {% endfor %}
+        </section>
     {% else %}
         <p><small>No recent activity.</small></p>
     {% endif %}
 </section>
+<script>
+(function() {
+    var scroll = document.getElementById('id_drama_scroll');
+    if (scroll) scroll.scrollTop = scroll.scrollHeight;
+})();
+</script>