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, useCallback } from 'react'
|
||||
import { createPortal } from 'react-dom'
|
||||
import { useParams, useNavigate } from 'react-router'
|
||||
import {
|
||||
DataTable,
|
||||
@@ -415,14 +414,13 @@ export default function Dashboard() {
|
||||
{/* Shortcuts bar */}
|
||||
<ShortcutsBar shortcuts={SHORTCUTS} />
|
||||
|
||||
{/* Detail panel — portaled to AppShell level for proper slide-in */}
|
||||
{selectedRow && detail && document.getElementById('detail-panel-portal') &&
|
||||
createPortal(
|
||||
<DetailPanel
|
||||
open={panelOpen}
|
||||
onClose={() => setPanelOpen(false)}
|
||||
title={`${detail.routeId} \u2014 ${selectedRow.executionId.slice(0, 12)}`}
|
||||
>
|
||||
{/* Detail panel — auto-portals to AppShell level via design system */}
|
||||
{selectedRow && detail && (
|
||||
<DetailPanel
|
||||
open={panelOpen}
|
||||
onClose={() => setPanelOpen(false)}
|
||||
title={`${detail.routeId} \u2014 ${selectedRow.executionId.slice(0, 12)}`}
|
||||
>
|
||||
<div className={styles.panelSection}>
|
||||
<button
|
||||
className={styles.openDetailLink}
|
||||
@@ -498,10 +496,8 @@ export default function Dashboard() {
|
||||
<div style={{ color: 'var(--text-muted)', fontSize: 12 }}>No processor data</div>
|
||||
)}
|
||||
</div>
|
||||
</DetailPanel>,
|
||||
document.getElementById('detail-panel-portal')!,
|
||||
)
|
||||
}
|
||||
</DetailPanel>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user