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