From f7fd30f36c748edf29c656f4258301f34df38e52 Mon Sep 17 00:00:00 2001
From: Bryan Helmkamp <bryan@brynary.com>
Date: Thu, 7 May 2026 11:31:08 -0700
Subject: [PATCH] refactor(web): inline event details panel so events list
 contracts

Replaces the fixed-position overlay panel with an in-flow flex sibling.
The panel now starts under the tab bar (not over the navbar) and the
events list contracts via flex-1 to make room for it instead of being
covered. Uses self-stretch on the panel wrapper so its height
propagates reliably; an inner absolute container right-anchored at
w-[28rem] gives the slide-in-from-right reveal as the wrapper width
animates from 0 to 28rem.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/fabro-web/app/routes/run-stages.tsx | 36 +++++++++++++-----------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/apps/fabro-web/app/routes/run-stages.tsx b/apps/fabro-web/app/routes/run-stages.tsx
index e5cd4e54c..c5bd84c37 100644
--- a/apps/fabro-web/app/routes/run-stages.tsx
+++ b/apps/fabro-web/app/routes/run-stages.tsx
@@ -359,26 +359,28 @@ function EventDetailsPanel({
 
   return (
     <div
-      className={`fixed inset-y-0 right-0 z-30 flex w-full max-w-xl flex-col bg-panel shadow-2xl transition-transform duration-200 ease-out ${
-        turn ? "translate-x-0" : "translate-x-full"
+      className={`relative shrink-0 self-stretch overflow-hidden transition-[width] duration-200 ease-out ${
+        turn ? "w-[28rem]" : "w-0"
       }`}
       aria-hidden={turn ? undefined : true}
     >
-      <div className="flex shrink-0 items-center justify-between border-b border-line px-6 py-4">
-        <h2 className="text-sm font-medium text-fg">
-          {turn ? `${turnLabel(turn)} event` : ""}
-        </h2>
-        <button
-          type="button"
-          onClick={onClose}
-          aria-label="Close details"
-          className="rounded-md p-1 text-fg-muted transition-colors hover:bg-overlay hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-500"
-        >
-          <XMarkIcon className="size-5" />
-        </button>
-      </div>
-      <div className="min-h-0 flex-1 overflow-y-auto px-6 py-5">
-        {turn ? <EventDetails turn={turn} runStart={runStart} /> : null}
+      <div className="absolute inset-y-0 right-0 flex w-[28rem] flex-col border-l border-line bg-panel">
+        <div className="flex shrink-0 items-center justify-between border-b border-line px-5 py-3">
+          <h2 className="text-sm font-medium text-fg">
+            {turn ? `${turnLabel(turn)} event` : ""}
+          </h2>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="Close details"
+            className="rounded-md p-1 text-fg-muted transition-colors hover:bg-overlay hover:text-fg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-teal-500"
+          >
+            <XMarkIcon className="size-5" />
+          </button>
+        </div>
+        <div className="min-h-0 flex-1 overflow-y-auto px-5 py-4">
+          {turn ? <EventDetails turn={turn} runStart={runStart} /> : null}
+        </div>
       </div>
     </div>
   );