Cleanup ReactButton's CSS, fix hitboxes of reactbutton and extrabuttons

src/components/extra_buttons/extra_buttons.vue

@@ -139,6 +139,11 @@
 @import '../../_variables.scss';
 
 .ExtraButtons {
+  /* override of popover internal stuff */
+  .popover-trigger-button {
+    width: auto;
+  }
+
   .popover-trigger {
     position: static;
     padding: 10px;

src/components/popover/popover.vue

@@ -7,6 +7,7 @@
       ref="trigger"
       class="button-unstyled -fullwidth popover-trigger-button"
       @click="onClick"
+      type="button"
     >
       <slot name="trigger" />
     </button>

src/components/react_button/react_button.vue

@@ -59,9 +59,11 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
+.ReactButton {
   .reaction-picker-filter {
     padding: 0.5em;
     display: flex;
+
     input {
       flex: 1;
     }
@@ -91,7 +93,8 @@
           linear-gradient(to top, white, white);
     transition: mask-size 150ms;
     mask-size: 100% 20px, 100% 20px, auto;
-  // Autoprefixed seem to ignore this one, and also syntax is different
+
+    /* Autoprefixed seem to ignore this one, and also syntax is different */
     -webkit-mask-composite: xor;
     mask-composite: exclude;
 
@@ -108,7 +111,12 @@
     }
   }
 
-.ReactButton {
+  /* override of popover internal stuff */
+  .popover-trigger-button {
+    width: auto;
+  }
+
+  .popover-trigger {
     padding: 10px;
     margin: -10px;
 
@@ -117,5 +125,6 @@
       color: var(--text, $fallback--text);
     }
   }
+}
 
 </style>