diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index c076a61c5..6b49cf682 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -197,7 +197,7 @@ const Popover = {
// Default to whatever user wished with placement prop
let usingTop = this.placement !== 'bottom'
- // Handle special cases, first force to displaying on top if there's not space on bottom,
+ // Handle special cases, first force to displaying on top if there's no space on bottom,
// regardless of what placement value was. Then check if there's no space on top, and
// force to bottom, again regardless of what placement value was.
const topBoundary = origin.y - anchorHeight * 0.5 + (this.removePadding ? topPadding : 0)
@@ -216,13 +216,13 @@ const Popover = {
// Default to whatever user wished with placement prop
let usingLeft = this.placement !== 'right'
- // Handle special cases, first force to displaying on left if there's not space on right,
+ // Handle special cases, first force to displaying on left if there's no space on right,
// regardless of what placement value was. Then check if there's no space on right, and
- // force to bottom, again regardless of what placement value was.
+ // force to left, again regardless of what placement value was.
const leftBoundary = origin.x - anchorWidth * 0.5 + (this.removePadding ? leftPadding : 0)
const rightBoundary = origin.x + anchorWidth * 0.5 - (this.removePadding ? rightPadding : 0)
- if (leftBoundary - content.offsetWidth > xBounds.max) usingLeft = true
- if (rightBoundary + content.offsetWidth < xBounds.min) usingLeft = false
+ if (rightBoundary + content.offsetWidth > xBounds.max) usingLeft = true
+ if (leftBoundary - content.offsetWidth < xBounds.min) usingLeft = false
const xOffset = (this.offset && this.offset.x) || 0
translateX = usingLeft
diff --git a/src/components/popover/popover.scss b/src/components/popover/popover.scss
index 6fe06299f..b7f426e08 100644
--- a/src/components/popover/popover.scss
+++ b/src/components/popover/popover.scss
@@ -63,13 +63,21 @@
cursor: pointer;
}
- .main-button {
+ .main-button,
+ .extra-button {
+ display: grid;
box-sizing: border-box;
padding: var(--__horizontal-gap) var(--__horizontal-gap);
- grid-gap: var(--__horizontal-gap);
- display: grid;
border: none;
align-items: center;
+ }
+
+ .extra-button {
+ border-left: 1px solid var(--icon);
+ }
+
+ .main-button {
+ grid-gap: var(--__horizontal-gap);
grid-template-columns: 1fr var(--__line-height);
grid-auto-flow: column;
grid-auto-columns: auto;
diff --git a/src/components/status_action_buttons/action_button.vue b/src/components/status_action_buttons/action_button.vue
index 9510d0bad..a634308d9 100644
--- a/src/components/status_action_buttons/action_button.vue
+++ b/src/components/status_action_buttons/action_button.vue
@@ -39,7 +39,7 @@
{{ $t(button.label(funcArg)) }}
status.thread_muted
? 'status.unmute_conversation'
diff --git a/src/components/status_action_buttons/status_action_buttons.vue b/src/components/status_action_buttons/status_action_buttons.vue
index d8573cdf7..79b7a4d6a 100644
--- a/src/components/status_action_buttons/status_action_buttons.vue
+++ b/src/components/status_action_buttons/status_action_buttons.vue
@@ -129,6 +129,23 @@
:do-action="doAction"
/>
+
+
+
+
+
+
+
+
diff --git a/src/components/user_list_menu/user_list_menu.vue b/src/components/user_list_menu/user_list_menu.vue
index 446441b38..a1ba96d89 100644
--- a/src/components/user_list_menu/user_list_menu.vue
+++ b/src/components/user_list_menu/user_list_menu.vue
@@ -2,7 +2,7 @@