fix: use self-portaling DetailPanel from design system v0.1.5
DetailPanel now portals itself to #cameleer-detail-panel-root (a div AppShell places as a sibling of .main in the top-level flex row). Pages just render <DetailPanel> inline — no manual createPortal, no context, no prop drilling. Remove the old #detail-panel-portal div from LayoutShell and the createPortal wrappers from Dashboard and AgentHealth. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,5 +1,4 @@
|
||||
import { useState, useMemo } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { useParams, Link } from 'react-router';
|
||||
import {
|
||||
StatCard, StatusDot, Badge, MonoText, ProgressBar,
|
||||
@@ -504,18 +503,15 @@ export default function AgentHealth() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Detail panel — portaled to AppShell level for proper slide-in */}
|
||||
{selectedInstance && document.getElementById('detail-panel-portal') &&
|
||||
createPortal(
|
||||
<DetailPanel
|
||||
open={panelOpen}
|
||||
onClose={() => { setPanelOpen(false); setSelectedInstance(null); }}
|
||||
title={selectedInstance.name ?? selectedInstance.id}
|
||||
tabs={detailTabs}
|
||||
/>,
|
||||
document.getElementById('detail-panel-portal')!,
|
||||
)
|
||||
}
|
||||
{/* Detail panel — auto-portals to AppShell level via design system */}
|
||||
{selectedInstance && (
|
||||
<DetailPanel
|
||||
open={panelOpen}
|
||||
onClose={() => { setPanelOpen(false); setSelectedInstance(null); }}
|
||||
title={selectedInstance.name ?? selectedInstance.id}
|
||||
tabs={detailTabs}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user