goToEvent target handling

packages/app/src/Element/Event/NoteContextMenu.tsx

@@ -200,7 +200,7 @@ export function NoteContextMenu({ ev, ...props }: NosteContextMenuProps) {
     <>
       <Menu
         menuButton={
-          <div className="reaction-pill">
+          <div className="reaction-pill cursor-pointer">
             <Icon name="dots" size={15} />
           </div>
         }

packages/app/src/Element/Event/NoteFooter.tsx

@@ -316,7 +316,7 @@ const AsyncFooterIcon = forwardRef((props: AsyncIconProps & { value: number }, r
   const mergedProps = {
     ...props,
     iconSize: 18,
-    className: classNames("transition duration-200 ease-in-out reaction-pill", props.className),
+    className: classNames("transition duration-200 ease-in-out reaction-pill cursor-pointer", props.className),
   };
 
   return (

packages/app/src/Element/Event/NoteInner.tsx

@@ -177,15 +177,24 @@ export function NoteInner(props: NoteProps) {
     return innerContent;
   };
 
-  function goToEvent(
+  function goToEvent(e: React.MouseEvent, eTarget: TaggedNostrEvent) {
-    e: React.MouseEvent,
+    if (opt?.canClick === false) {
-    eTarget: TaggedNostrEvent,
-    isTargetAllowed: boolean = e.target === e.currentTarget,
-  ) {
-    if (!isTargetAllowed || opt?.canClick === false) {
       return;
     }
 
+    let target = e.target as HTMLElement | null;
+    while (target) {
+      if (
+        target.tagName === "A" ||
+        target.tagName === "BUTTON" ||
+        target.classList.contains("reaction-pill") ||
+        target.classList.contains("szh-menu-container")
+      ) {
+        return; // is there a better way to do this?
+      }
+      target = target.parentElement;
+    }
+
     e.stopPropagation();
     if (props.onClick) {
       props.onClick(eTarget);
@@ -355,7 +364,7 @@ export function NoteInner(props: NoteProps) {
           {translation()}
           {pollOptions()}
           {options.showReactionsLink && (
-            <div className="reactions-link" onClick={() => setShowReactions(true)}>
+            <div className="reactions-link cursor-pointer" onClick={() => setShowReactions(true)}>
               <FormattedMessage {...messages.ReactionsLink} values={{ n: totalReactions }} />
             </div>
           )}