Makes entire note clickable

packages/app/src/Element/Note.css

@@ -2,6 +2,10 @@
   min-height: 110px;
 }
 
+.note:hover {
+  cursor: pointer;
+}
+
 .note > .header .reply {
   font-size: 13px;
   color: var(--font-secondary-color);
@@ -132,8 +136,7 @@
 }
 
 .note > .header img:hover,
-.note > .header .name > .reply:hover,
+.note > .header .name > .reply:hover {
-.note .body:hover {
   cursor: pointer;
 }
 

packages/app/src/Element/Note.tsx

@@ -175,7 +175,11 @@ export default function Note(props: NoteProps) {
     }
   }, [inView, entry, extendable]);
 
-  function goToEvent(e: React.MouseEvent, id: u256) {
+  function goToEvent(e: React.MouseEvent, id: u256, isTargetAllowed: boolean = e.target === e.currentTarget) {
+    if (!isTargetAllowed) {
+      return;
+    }
+    
     e.stopPropagation();
     navigate(eventLink(id));
   }
@@ -287,7 +291,7 @@ export default function Note(props: NoteProps) {
             )}
           </div>
         )}
-        <div className="body" onClick={e => goToEvent(e, ev.Id)}>
+        <div className="body" onClick={e => goToEvent(e, ev.Id, true)}>
           {transformBody()}
           {translation()}
           {options.showReactionsLink && (
@@ -320,6 +324,7 @@ export default function Note(props: NoteProps) {
   const note = (
     <div
       className={`${baseClassName}${highlight ? " active " : " "}${extendable && !showMore ? " note-expand" : ""}`}
+      onClick={e => goToEvent(e, ev.Id)}
       ref={ref}>
       {content()}
     </div>