Merge pull request #304 from joshr4/improve-overflow-menu-button

Improve overflow menu button

packages/app/src/Element/Note.css

@@ -154,6 +154,10 @@
   font-feature-settings: "tnum";
 }
 
+.reaction-pill-icon {
+  margin: auto;
+}
+
 .reaction-pill .reaction-pill-number {
   margin-left: 8px;
   font-feature-settings: "tnum";
@@ -216,3 +220,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;
+}

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 />