more fixes, add fullwidth

10 files changed, 37 insertions, 33 deletions

diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index 224e72cf..d308bf86 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -6,13 +6,13 @@
   >
     <slot />
     <template v-if="enableEmojiPicker">
-      <div
+      <button
         v-if="!hideEmojiButton"
-        class="emoji-picker-icon"
+        class="button-unstyled emoji-picker-icon"
         @click.prevent="togglePicker"
       >
         <FAIcon :icon="['far', 'smile-beam']" />
-      </div>
+      </button>
       <EmojiPicker
         v-if="enableEmojiPicker"
         ref="picker"
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 5c9e1963..1578267c 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -2,7 +2,7 @@
   <Popover
     trigger="click"
     placement="top"
-    class="extra-button-popover"
+    :offset="{ y: -5 }"
     :bound-to="{ x: 'container' }"
   >
     <div
@@ -97,15 +97,15 @@
         </button>
       </div>
     </div>
-    <button
+    <span
       slot="trigger"
-      class="ExtraButtons button-unstyled -padded"
+      class="ExtraButtons"
     >
       <FAIcon
         class="fa-scale-110 fa-old-padding"
         icon="ellipsis-h"
       />
-    </button>
+    </span>
   </Popover>
 </template>
 
@@ -117,6 +117,8 @@
 .ExtraButtons {
   cursor: pointer;
   position: static;
+  padding: 10px;
+  margin: -10px;
 
   &:hover .svg-inline--fa {
     color: $fallback--text;
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 663f623b..725d1ad4 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -43,7 +43,7 @@
         </div>
         <button
           v-else-if="!loading"
-          class="button-unstyled -link"
+          class="button-unstyled -link -fullwidth"
           @click.prevent="fetchOlderNotifications()"
         >
           <div class="new-status-notification text-center panel-footer">
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index 695f73b9..db4a768b 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -99,7 +99,7 @@ const Popover = {
       const yOffset = (this.offset && this.offset.y) || 0
       const translateY = usingTop
         ? -anchorEl.offsetHeight - yOffset - content.offsetHeight
-        : yOffset
+        : -yOffset
 
       const xOffset = (this.offset && this.offset.x) || 0
       const translateX = (anchorEl.offsetWidth * 0.5) - content.offsetWidth * 0.5 + horizOffset + xOffset
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 9b8680e5..3868ec96 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -3,12 +3,13 @@
     @mouseenter="onMouseenter"
     @mouseleave="onMouseleave"
   >
-    <div
+    <button
       ref="trigger"
+      class="button-unstyled -fullwidth"
       @click="onClick"
     >
       <slot name="trigger" />
-    </div>
+    </button>
     <div
       v-if="!hidden"
       ref="content"
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index ea4a8a9b..2e3cedd1 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -2,8 +2,7 @@
   <Popover
     trigger="click"
     placement="top"
-    :offset="{ y: 5 }"
-    class="react-button-popover"
+    :offset="{ y: -5 }"
     :bound-to="{ x: 'container' }"
   >
     <div
@@ -38,16 +37,16 @@
         <div class="reaction-bottom-fader" />
       </div>
     </div>
-    <button
+    <span
       slot="trigger"
-      class="add-reaction-button button-unstyled -padded"
+      class="AddReaction"
       :title="$t('tool_tip.add_reaction')"
     >
       <FAIcon
         class="fa-scale-110 fa-old-padding"
         :icon="['far', 'smile-beam']"
       />
-    </button>
+    </span>
   </Popover>
 </template>
 
@@ -105,8 +104,10 @@
   }
 }
 
-.add-reaction-button {
+.AddReaction {
   cursor: pointer;
+  padding: 10px;
+  margin: -10px;
 
   &:hover .svg-inline--fa {
     color: $fallback--text;
diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
index a22a4fda..66ac612e 100644
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@@ -3,9 +3,9 @@
     v-if="!showNothing"
     class="ScopeSelector"
   >
-    <span
+    <button
       v-if="showDirect"
-      class="scope"
+      class="button-unstyled scope"
       :class="css.direct"
       :title="$t('post_status.scope.direct')"
       @click="changeVis('direct')"
@@ -14,10 +14,10 @@
         icon="envelope"
         class="fa-scale-110 fa-old-padding"
       />
-    </span>
-    <span
+    </button>
+    <button
       v-if="showPrivate"
-      class="scope"
+      class="button-unstyled scope"
       :class="css.private"
       :title="$t('post_status.scope.private')"
       @click="changeVis('private')"
@@ -26,10 +26,10 @@
         icon="lock"
         class="fa-scale-110 fa-old-padding"
       />
-    </span>
-    <span
+    </button>
+    <button
       v-if="showUnlisted"
-      class="scope"
+      class="button-unstyled scope"
       :class="css.unlisted"
       :title="$t('post_status.scope.unlisted')"
       @click="changeVis('unlisted')"
@@ -38,10 +38,10 @@
         icon="lock-open"
         class="fa-scale-110 fa-old-padding"
       />
-    </span>
-    <span
+    </button>
+    <button
       v-if="showPublic"
-      class="scope"
+      class="button-unstyled scope"
       :class="css.public"
       :title="$t('post_status.scope.public')"
       @click="changeVis('public')"
@@ -50,7 +50,7 @@
         icon="globe"
         class="fa-scale-110 fa-old-padding"
       />
-    </span>
+    </button>
   </div>
 </template>
 
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 1c14c1ab..695ae03b 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -145,7 +145,7 @@
         </li>
         <li @click="toggleDrawer">
           <button
-            class="button-unstyled -link"
+            class="button-unstyled -link -fullwidth"
             @click="openSettingsModal"
           >
             <FAIcon
@@ -184,7 +184,7 @@
           @click="toggleDrawer"
         >
           <button
-            class="button-unstyled -link"
+            class="button-unstyled -link -fullwidth"
             @click="doLogout"
           >
             <FAIcon
@@ -337,7 +337,6 @@
     height: 3em;
     line-height: 3em;
     padding: 0 0.7em;
-    width: 100%;
 
     &:hover {
       background-color: $fallback--lightBg;
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 8ffa4499..52fd674e 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -63,7 +63,7 @@
       </div>
       <button
         v-else-if="!timeline.loading"
-        class="button-unstyled -link"
+        class="button-unstyled -link -fullwidth"
         @click.prevent="fetchOlderStatuses()"
       >
         <div class="new-status-notification text-center panel-footer">{{ $t('timeline.load_older') }}</div>
diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index c46531be..f8f79be9 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -84,6 +84,7 @@
   margin-right: auto;
   min-width: 0;
   width: 24rem;
+  height: 28px;
 
   .timeline-menu-popover-wrap {
     overflow: hidden;