Style activity summaries

app/assets/stylesheets/events.css

@@ -8,6 +8,37 @@
     --events-day-header-height: 1.75rem;
   }
 
+  .events__activity-summary {
+    --border-color: var(--color-selected);
+
+    background-color: var(--color-selected-light);
+    font-style: italic;
+    line-height: 1.3;
+    margin-inline: auto;
+    max-inline-size: 80ch;
+    padding: 1.3lh 1lh 1lh;
+
+    a {
+      font-weight: 500;
+    }
+
+    p {
+      margin-block: 0;
+
+      + p {
+        margin-block-start: 1lh;
+      }
+    }
+
+    + .btn {
+      --btn-background: var(--color-selected-light);
+      --btn-border-color: var(--color-selected-dark);
+
+      inset: auto 1em 1em auto;
+      position: absolute;
+    }
+  }
+
   .events__day {
     position: relative;
 

app/views/events/day_timeline/_activity_summary.html.erb

@@ -1,3 +1,3 @@
-<div id="<%= summary.key %>">
+<div class="events__activity-summary margin-block txt-small border border-radius" id="<%= summary.key %>">
   <%= summary.to_html %>
 </div>

app/views/events/day_timeline/_summary.html.erb

@@ -1,9 +1,14 @@
 <% if day_timeline.summarized? %>
-  <%= render "events/day_timeline/activity_summary", summary: day_timeline.summary %>
+  <div class="position-relative">
+    <%= render "events/day_timeline/activity_summary", summary: day_timeline.summary %>
 
-  <% if Current.user.staff? %>
-    <p><%= link_to "Prompt sandbox", admin_prompt_sandbox_path(day: day_timeline.day) %></p>
-  <% end %>
+    <% if Current.user.staff? %>
+      <%= link_to admin_prompt_sandbox_path(day: day_timeline.day), class: "btn txt-xx-small" do %>
+        <%= icon_tag "bolt" %>
+        <span class="for-screen-reader">Prompt sandbox</span>
+      <% end %>
+    <% end %>
+  </div>
 <% else %>
   <div id="<%= day_timeline.summary_key %>">
     <%= auto_submit_form_with url: events_activity_summaries_path(day: day_timeline.day, **day_timeline.filter.as_params), method: :post %>