Merge branch 'reactbutton-consistency' into 'develop'

Some fixes for reactbutton/extrabuttons

See merge request pleroma/pleroma-fe!1340

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

@@ -1,6 +1,7 @@
 <template>
   <Popover
     trigger="click"
+    class="ReactButton"
     placement="top"
     :offset="{ y: 5 }"
     :bound-to="{ x: 'container' }"
@@ -42,7 +43,7 @@
     </div>
     <span
       slot="trigger"
-      class="ReactButton"
+      class="popover-trigger"
       :title="$t('tool_tip.add_reaction')"
     >
       <FAIcon
@@ -58,9 +59,11 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
+.ReactButton {
   .reaction-picker-filter {
     padding: 0.5em;
     display: flex;
+
     input {
       flex: 1;
     }
@@ -90,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;
 
@@ -107,7 +111,12 @@
     }
   }
 
-.ReactButton {
+  /* override of popover internal stuff */
+  .popover-trigger-button {
+    width: auto;
+  }
+
+  .popover-trigger {
     padding: 10px;
     margin: -10px;
 
@@ -116,5 +125,6 @@
       color: var(--text, $fallback--text);
     }
   }
+}
 
 </style>