scriptoriumadmin/fabro
1
0
Fork 0
mirror of https://github.com/fabro-sh/fabro.git synced 2026-10-08 03:10:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

refactor(web): inline event details panel so events list contracts

Browse source 
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>
This commit is contained in:
Bryan Helmkamp 2026-05-07 11:31:08 -07:00
parent 9d2c83d904
commit f7fd30f36c
No known key found for this signature in database
1 changed files with 19 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
apps/fabro-web/app/routes/run-stages.tsx
View file

@ -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>
);