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,22 +59,24 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.reaction-picker-filter {
+.ReactButton {
+  .reaction-picker-filter {
     padding: 0.5em;
     display: flex;
+
     input {
       flex: 1;
     }
-}
+  }
 
-.reaction-picker-divider {
+  .reaction-picker-divider {
     height: 1px;
     width: 100%;
     margin: 0.5em;
     background-color: var(--border, $fallback--border);
-}
+  }
 
-.reaction-picker {
+  .reaction-picker {
     width: 10em;
     height: 9em;
     font-size: 1.5em;
@@ -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;
 
@@ -106,9 +109,14 @@
         transform: scale(1.25);
       }
     }
-}
+  }
 
-.ReactButton {
+  /* override of popover internal stuff */
+  .popover-trigger-button {
+    width: auto;
+  }
+
+  .popover-trigger {
     padding: 10px;
     margin: -10px;
 
@@ -116,6 +124,7 @@
       color: $fallback--text;
       color: var(--text, $fallback--text);
     }
+  }
 }
 
 </style>