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

src/static_src/scss/_billboard.scss

@@ -71,6 +71,51 @@ body.page-billscroll {
     }
 }
 
+// ── Billboard applet placement ─────────────────────────────────────────────
+// Explicit placement: My Scrolls + Contacts stack left, Most Recent fills right.
+// Portrait override (container query) restores stacked full-width layout.
+
+#id_billboard_applets_container {
+    #id_applet_billboard_my_scrolls  { grid-column: 1 / span 4; grid-row: 1 / span 3; }
+    #id_applet_billboard_my_contacts { grid-column: 1 / span 4; grid-row: 4 / span 3; }
+    #id_applet_billboard_most_recent { grid-column: 5 / span 8; grid-row: 1 / span 6; }
+
+    @container (max-width: 550px) {
+        #id_applet_billboard_my_scrolls,
+        #id_applet_billboard_my_contacts,
+        #id_applet_billboard_most_recent {
+            grid-column: 1 / span 12;
+            grid-row: span var(--applet-rows, 3);
+        }
+    }
+}
+
+// ── Most Recent applet — scrollable drama feed ─────────────────────────────
+
+#id_applet_billboard_most_recent {
+    display: flex;
+    flex-direction: column;
+
+    .most-recent-room-link {
+        flex-shrink: 0;
+        margin-bottom: 0.25rem;
+        font-weight: bold;
+    }
+
+    #id_drama_scroll {
+        flex: 1;
+        min-height: 0;
+        overflow-y: auto;
+    }
+
+    .most-recent-load-more {
+        display: block;
+        padding-bottom: 0.5rem;
+        font-size: 0.8rem;
+        text-align: center;
+    }
+}
+
 // ── My Scrolls list ────────────────────────────────────────────────────────
 
 #id_applet_billboard_my_scrolls {