From 695969d75930bc6c354b0ad1ce3c47a46974e1e4 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Mon, 23 Mar 2026 20:47:43 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20DetailPanel=20slide-in=20now=20visible?=
 =?UTF-8?q?=20=E2=80=94=20fixed=20empty=20content=20bug=20and=20positionin?=
 =?UTF-8?q?g?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Only render DetailPanel when detail data is loaded (key={selectedId} forces remount
  so internal activeTab state resets correctly)
- Override DetailPanel CSS with position:fixed to overlay on right side
  (AppShell layout doesn't support detail prop from child pages)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/src/pages/Dashboard/Dashboard.module.css |  9 +++++++++
 ui/src/pages/Dashboard/Dashboard.tsx        | 16 ++++++++++------
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/ui/src/pages/Dashboard/Dashboard.module.css b/ui/src/pages/Dashboard/Dashboard.module.css
index 5b32cf35..3f800f71 100644
--- a/ui/src/pages/Dashboard/Dashboard.module.css
+++ b/ui/src/pages/Dashboard/Dashboard.module.css
@@ -101,6 +101,15 @@
   background: var(--bg-hover);
 }
 
+.detailPanelOverride {
+  position: fixed;
+  top: 0;
+  right: 0;
+  height: 100vh;
+  z-index: 100;
+  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
+}
+
 .openDetailLink {
   display: inline-block;
   font-size: 13px;
diff --git a/ui/src/pages/Dashboard/Dashboard.tsx b/ui/src/pages/Dashboard/Dashboard.tsx
index e687a68a..45d6697a 100644
--- a/ui/src/pages/Dashboard/Dashboard.tsx
+++ b/ui/src/pages/Dashboard/Dashboard.tsx
@@ -262,12 +262,16 @@ export default function Dashboard() {
         />
       </div>
 
-      <DetailPanel
-        open={!!selectedId}
-        onClose={() => setSelectedId(null)}
-        title={selectedId ? `Exchange ${selectedId.slice(0, 12)}...` : ''}
-        tabs={detailTabs}
-      />
+      {selectedId && detail && (
+        <DetailPanel
+          key={selectedId}
+          open={true}
+          onClose={() => setSelectedId(null)}
+          title={`Exchange ${selectedId.slice(0, 12)}...`}
+          tabs={detailTabs}
+          className={styles.detailPanelOverride}
+        />
+      )}
     </div>
   );
 }