Activity viewer: side-by-side two columns — sticky Upcoming/scheduled lane (left) + Recent activity feed (right); stacks on narrow screens

0dfcebe62f769ab6d295806fe796a55beb85540d · 2026-06-16 18:04:17 -0700 · SteveStudio2

Files touched

M activity.html

Diff

commit 0dfcebe62f769ab6d295806fe796a55beb85540d
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date:   Tue Jun 16 18:04:17 2026 -0700

    Activity viewer: side-by-side two columns — sticky Upcoming/scheduled lane (left) + Recent activity feed (right); stacks on narrow screens
---
 activity.html | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/activity.html b/activity.html
index 1b8f7a7..d487ca1 100644
--- a/activity.html
+++ b/activity.html
@@ -16,7 +16,11 @@
   .chip.on{color:#fff}
   .chip .dot{width:9px;height:9px;border-radius:50%}
   .chip .n{font:11px ui-monospace,monospace;opacity:.8}
-  main{max-width:1000px;margin:0 auto;padding:18px 28px 70px}
+  main{max-width:1340px;margin:0 auto;padding:18px 28px 70px}
+  .cols{display:grid;grid-template-columns:minmax(340px,400px) 1fr;gap:26px;align-items:start}
+  .col-up{position:sticky;top:132px;max-height:calc(100vh - 150px);overflow:auto}
+  .col-head{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:6px 2px 0}
+  @media(max-width:900px){.cols{grid-template-columns:1fr}.col-up{position:static;max-height:none;overflow:visible}}
   .day{margin:22px 0 8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);position:sticky;top:128px;background:#0b0e14;padding:4px 0;z-index:3}
   .ev{display:grid;grid-template-columns:64px 92px 1fr;gap:12px;align-items:baseline;padding:8px 10px;border-radius:9px;border-left:3px solid var(--c,#2b3650);background:#0e1320;margin-bottom:5px}
   .ev:hover{background:#121829}
@@ -46,7 +50,10 @@
   <div class="meta"><span class="pulse"></span><span id="meta">loading…</span> · auto-refreshes every 30s · <a href="/pyramid">← cabinet pyramid</a></div>
   <div class="chips" id="chips"></div>
 </header>
-<main><section id="upcoming"></section><div id="feed"><div class="empty">Loading activity…</div></div></main>
+<main class="cols">
+  <aside class="col-up"><section id="upcoming"></section></aside>
+  <div class="col-feed"><div class="col-head">Recent activity</div><div id="feed"><div class="empty">Loading activity…</div></div></div>
+</main>
 <script>
 const TYPES={
   commit:{label:'Commits', col:'#a78bfa'},

← 5b4da1d Activity viewer: add Upcoming/scheduled lane — /api/schedule · back to Agent Cabinet · Activity viewer: draggable middle splitter to resize the two be0315f →