Fix image click handler and emoji popup

public/static/css/chat.css

@@ -9,7 +9,13 @@ body {
 /* No dragging images - it plays wrongly with the drag/drop image sharing feature
    and users can accidentally share in chat by dragging an on-page image */
 img {
-    pointer-events: none;
+    /* https://stackoverflow.com/questions/12906789/preventing-an-image-from-being-draggable-or-selectable-without-using-js */
+    user-drag: none;
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-drag: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
 }
 
 .float-right {

src/App.vue

@@ -2800,6 +2800,13 @@ export default {
             let $body = document.querySelector("body");
 
             // Set up drag/drop file upload events.
+            $body.addEventListener("dragstart", (e) => {
+                // Nothing ON the page should begin being draggable. Prevents on-page images from
+                // being dragged and then dropped (and sent as files on chat), but still allows
+                // their click handler to view in the lightbox modal.
+                e.preventDefault();
+                return false;
+            })
             $body.addEventListener("dragenter", (e) => {
                 e.preventDefault();
                 e.stopPropagation();

src/components/MessageBox.vue

@@ -311,7 +311,7 @@ export default {
             </div>
 
             <div class="column dropdown is-right"
-                :class="{ 'is-up': position >= 2 || reportEnabled, 'is-active': showEmojiPicker }"
+                :class="{ 'is-up': position >= 2, 'is-active': showEmojiPicker }"
                 @click="showEmojiPicker = true">
                 <div class="dropdown-trigger">
                     <button type="button" class="button is-small px-2" aria-haspopup="true"
@@ -411,7 +411,7 @@ export default {
             <div class="columns is-mobile is-gapless mb-0">
                 <!-- More buttons menu (DM, mute, report, etc.) -->
                 <div class="column dropdown is-right"
-                    :class="{ 'is-up': position >= 2 || reportEnabled, 'is-active': menuVisible }"
+                    :class="{ 'is-up': position >= 2, 'is-active': menuVisible }"
                     @click="menuVisible = !menuVisible">
                     <div class="dropdown-trigger">
                         <button type="button" class="button is-small px-2 mr-1" aria-haspopup="true"
@@ -463,7 +463,7 @@ export default {
 
                 <!-- Emoji reactions -->
                 <div class="column dropdown is-right"
-                    :class="{ 'is-up': position >= 2 || reportEnabled, 'is-active': showEmojiPicker }"
+                    :class="{ 'is-up': position >= 2, 'is-active': showEmojiPicker }"
                     @click="showEmojiPicker = true">
                     <div class="dropdown-trigger">
                         <button type="button" class="button is-small px-2" aria-haspopup="true"