From 37a90a90c2dcb9d785a945a480b88500b14b38b5 Mon Sep 17 00:00:00 2001
From: Josh Remaley <joshremaley@gmail.com>
Date: Tue, 14 Feb 2023 15:53:28 -0600
Subject: [PATCH 1/3] increase clickable area for overflow menu icon

---
 packages/app/src/Element/Note.css | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/app/src/Element/Note.css b/packages/app/src/Element/Note.css
index 1f6830e3..5e717c8e 100644
--- a/packages/app/src/Element/Note.css
+++ b/packages/app/src/Element/Note.css
@@ -144,16 +144,18 @@
 
 .reaction-pill {
   display: flex;
-  margin: 0px 7px;
-  padding: 2px 4px;
-  min-width: 1rem;
-  align-items: center;
-  justify-content: center;
+  flex-direction: row;
+  margin: 0px 14px;
+  min-width: 16px;
   user-select: none;
   color: var(--font-secondary-color);
   font-feature-settings: "tnum";
 }
 
+.reaction-pill-icon {
+  margin: auto;
+}
+
 .reaction-pill .reaction-pill-number {
   margin-left: 8px;
   font-feature-settings: "tnum";

From 625b734fde0555ddbd3393b0a1e55b1db85a8ebc Mon Sep 17 00:00:00 2001
From: Josh Remaley <joshremaley@gmail.com>
Date: Tue, 14 Feb 2023 16:47:28 -0600
Subject: [PATCH 2/3] add close menu button to exit menu

---
 packages/app/src/Element/Note.css       | 12 ++++++++++++
 packages/app/src/Element/NoteFooter.tsx |  7 +++++++
 2 files changed, 19 insertions(+)

diff --git a/packages/app/src/Element/Note.css b/packages/app/src/Element/Note.css
index 5e717c8e..680972ab 100644
--- a/packages/app/src/Element/Note.css
+++ b/packages/app/src/Element/Note.css
@@ -218,3 +218,15 @@
 .note .reactions-link:hover {
   text-decoration: underline;
 }
+
+.close-menu {
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  top: -400px;
+  left: -600px;
+}
+
+.close-menu-container {
+  position: absolute;
+}
diff --git a/packages/app/src/Element/NoteFooter.tsx b/packages/app/src/Element/NoteFooter.tsx
index 79dd54b4..f35e3781 100644
--- a/packages/app/src/Element/NoteFooter.tsx
+++ b/packages/app/src/Element/NoteFooter.tsx
@@ -209,6 +209,13 @@ export default function NoteFooter(props: NoteFooterProps) {
   function menuItems() {
     return (
       <>
+        <div className="close-menu-container">
+          {/* This menu item serves as a "close menu" button;
+          it allows the user to click anywhere nearby the menu to close it. */}
+          <MenuItem>
+            <div className="close-menu" />
+          </MenuItem>
+        </div>
         {prefs.enableReactions && (
           <MenuItem onClick={() => setShowReactions(true)}>
             <Heart />

From 4fa14247fb2d75ffb49ecced264ba0c25ba3cc17 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20Lo=CC=81pez=20Guevara?=
 <fernando.lguevara@gmail.com>
Date: Wed, 15 Feb 2023 13:49:03 -0300
Subject: [PATCH 3/3] fix(fotter-actions): add highlighting and min-width

---
 packages/app/src/Element/Note.css | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/Element/Note.css b/packages/app/src/Element/Note.css
index 680972ab..fc6dff84 100644
--- a/packages/app/src/Element/Note.css
+++ b/packages/app/src/Element/Note.css
@@ -144,9 +144,11 @@
 
 .reaction-pill {
   display: flex;
-  flex-direction: row;
-  margin: 0px 14px;
-  min-width: 16px;
+  margin: 0px 7px;
+  padding: 2px 4px;
+  min-width: 1rem;
+  align-items: center;
+  justify-content: center;
   user-select: none;
   color: var(--font-secondary-color);
   font-feature-settings: "tnum";