From a5439891a7ae705138bda4a07f757b519f96019f Mon Sep 17 00:00:00 2001
From: Nick Mitchell <nickm@us.ibm.com>
Date: Tue, 21 Jan 2025 18:19:54 -0500
Subject: [PATCH] fix: avoid use of patternfly Card isClickable

problematic with z-index clicks and requires a global dom id for the click area. problemtic!

Signed-off-by: Nick Mitchell <nickm@us.ibm.com>
---
 pdl-live-react/src/view/transcript/BreadcrumbBar.css  | 3 ---
 pdl-live-react/src/view/transcript/Transcript.css     | 3 +++
 pdl-live-react/src/view/transcript/TranscriptItem.tsx | 8 +-------
 3 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/pdl-live-react/src/view/transcript/BreadcrumbBar.css b/pdl-live-react/src/view/transcript/BreadcrumbBar.css
index ddc5a414..6fc41e25 100644
--- a/pdl-live-react/src/view/transcript/BreadcrumbBar.css
+++ b/pdl-live-react/src/view/transcript/BreadcrumbBar.css
@@ -6,9 +6,6 @@
   /** Size factor relative to 1em */
   --pdl-bb: 0.625;
 
-  /** So that clicks get sent here first, not to the <Card isClickable/> used in <TranscriptItem/> */
-  z-index: 1000;
-
   list-style: none;
   display: inline-block;
   font-size: calc(var(--pdl-bb) * 1em);
diff --git a/pdl-live-react/src/view/transcript/Transcript.css b/pdl-live-react/src/view/transcript/Transcript.css
index 78acf8e7..8e88f8c6 100644
--- a/pdl-live-react/src/view/transcript/Transcript.css
+++ b/pdl-live-react/src/view/transcript/Transcript.css
@@ -1,4 +1,7 @@
 .pdl-transcript-item {
+  &:hover:before {
+    border-color: var(--pf-v6-c-card--m-selectable--hover--BorderColor);
+  }
   &:first-child {
     /* margin-top: 1em; */
   }
diff --git a/pdl-live-react/src/view/transcript/TranscriptItem.tsx b/pdl-live-react/src/view/transcript/TranscriptItem.tsx
index c91b9afd..e33a1af2 100644
--- a/pdl-live-react/src/view/transcript/TranscriptItem.tsx
+++ b/pdl-live-react/src/view/transcript/TranscriptItem.tsx
@@ -96,18 +96,12 @@ export default function TranscriptItem(props: Props) {
       key={props.ctx.id}
       id={props.ctx.id}
       onClick={drilldown}
-      isClickable
       className={
         "pdl-transcript-item" + (props.className ? " " + props.className : "")
       }
       data-id={props.ctx.id}
     >
-      <CardHeader
-        selectableActions={{
-          onClickAction: drilldown,
-          selectableActionAriaLabelledby: props.ctx.id,
-        }}
-      >
+      <CardHeader>
         <CardTitle>{headerContent}</CardTitle>
       </CardHeader>