more fixes for popover

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

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;

src/components/status_action_buttons/action_button.vue

@@ -39,7 +39,7 @@
         </template>
       </FALayers><span>{{ $t(button.label(funcArg)) }}</span>
       <FAIcon
-        v-if="button.name === 'bookmark'"
+        v-if="button.name === 'mute'"
         class="chevron-icon"
         size="lg"
         icon="chevron-right"

src/components/status_action_buttons/status_action_buttons.js

@@ -138,7 +138,7 @@ const BUTTONS = [{
   // =========
   // MUTE CONVERSATION, my beloved
   // =========
-  name: 'mute-conversation',
+  name: 'mute',
   icon: 'eye-slash',
   label: ({ status }) => status.thread_muted
     ? 'status.unmute_conversation'

src/components/status_action_buttons/status_action_buttons.vue

@@ -129,6 +129,23 @@
                     :do-action="doAction"
                   />
                 </template>
+                <template #content>
+                  <StatusBookmarkFolderMenu v-if="button.name === 'mute'" :status="funcArg.status" />
+                </template>
+              </Popover>
+              <Popover
+                trigger="hover"
+                placement="right"
+                :trigger-attrs="{ class: 'extra-button' }"
+                v-if="button.name === 'bookmark'"
+              >
+                <template #trigger>
+                  <FAIcon
+                    class="chevron-icon"
+                    size="lg"
+                    icon="chevron-right"
+                  />
+                </template>
                 <template #content>
                   <StatusBookmarkFolderMenu v-if="button.name === 'bookmark'" :status="funcArg.status" />
                 </template>

src/components/user_list_menu/user_list_menu.vue

@@ -2,7 +2,7 @@
   <div class="UserListMenu">
     <Popover
       trigger="hover"
-      placement="left"
+      placement="right"
       :trigger-attrs="triggerAttrs"
       remove-padding
     >