optimized and prettified status action buttons

src/components/status_action_buttons/action_button.scss

@@ -6,19 +6,24 @@
   display: flex;
   align-items: baseline;
   align-items: center;
-  height: 1.5em;
+  border: 2px solid transparent;
+
+  .chevron-popover {
+    .popover-trigger-button {
+      display: flex;
+    }
+  }
 
   .action-counter {
     overflow-x: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    margin-left: 1em;
   }
 
   .action-button-inner,
   .extra-button {
-    margin: -0.5em;
     padding: 0.5em;
+    z-index: 1;
   }
 
   .separator {
@@ -26,27 +31,12 @@
     align-self: stretch;
     width: 1px;
     background-color: var(--icon);
-    margin-left: 0.75em;
-    margin-right: 0.125em;
-  }
-
-  &.-pin {
-    margin: calc(-2px - 0.25em);
-    padding: 0.25em;
-    border: 2px dashed var(--icon);
-    border-radius: var(--roundness);
-    grid-template-columns: minmax(max-content, 1fr) auto;
-
-    .chevron-icon,
-    .extra-button,
-    .separator {
-      display: none;
-    }
+    margin: 0.5em 0;
   }
 
   .action-button-inner {
     display: grid;
-    grid-gap: 1em;
+    grid-gap: 0.125em;
     grid-template-columns: max-content;
     grid-auto-flow: column;
     grid-auto-columns: max-content;
@@ -72,6 +62,32 @@
       }
     }
   }
+
+  &.-pin {
+    border: 2px dashed var(--icon);
+    border-radius: var(--roundness);
+    grid-template-columns: minmax(max-content, 1fr) auto;
+
+    .action-button-inner {
+      opacity: 0.8;
+      padding-right: 0;
+      pointer-events: none;
+    }
+
+    .chevron-icon,
+    .extra-button,
+    .separator {
+      display: none;
+    }
+  }
+
+  &.-with-extra {
+    .action-button-inner,
+    .extra-button {
+      padding-left: 0.2em;
+      padding-right: 0.25em;
+    }
+  }
 }
 
 .action-button {
@@ -106,7 +122,7 @@
   &.-extra {
     .action-counter {
       justify-self: end;
-      margin-right: 1em;
+      margin-left: 1em;
     }
 
     .chevron-icon {

src/components/status_action_buttons/action_button.vue

@@ -54,7 +54,6 @@
       <FAIcon
         v-if="button.dropdown?.()"
         class="chevron-icon"
-        size="lg"
         :icon="extra ? 'chevron-right' : 'chevron-up'"
         fixed-width
       />
@@ -71,6 +70,7 @@
     />
     <Popover
       v-if="button.name === 'bookmark'"
+      class="chevron-popover"
       :trigger="extra ? 'hover' : 'click'"
       :placement="extra ? 'right' : 'top'"
       :offset="extra ? { x: 10 } : { y: 10 }"
@@ -79,7 +79,6 @@
       <template #trigger>
         <FAIcon
           class="chevron-icon"
-          size="lg"
           :icon="extra ? 'chevron-right' : 'chevron-up'"
           fixed-width
         />

src/components/status_action_buttons/status_action_buttons.scss

@@ -3,16 +3,19 @@
 .StatusActionButtons {
   .quick-action-buttons {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(10%, 3em));
+    margin-left: -0.5em;
+    grid-template-columns: repeat(auto-fill, minmax(3.5em, 10%));
     grid-auto-flow: row dense;
     grid-auto-rows: 1fr;
-    grid-gap: 1.25em 0;
+    grid-gap: 0.5em 0.1em;
     margin-top: var(--status-margin);
   }
 
   .pin-action-button {
-    margin: -0.5em;
+    display: flex;
+    z-index: 1;
     padding: 0.5em;
+    margin: 0;
   }
 }
 // popover

src/components/status_action_buttons/status_action_buttons.vue

@@ -1,11 +1,14 @@
 <template>
   <div class="StatusActionButtons">
-    <span class="quick-action-buttons">
+    <span
+      class="quick-action-buttons"
+      :class="{ '-pin': showPin }"
+      >
       <span
         v-for="button in quickButtons"
         :key="button.name"
         class="quick-action"
-        :class="{ '-pin': showPin, '-toggle': button.dropdown?.() }"
+        :class="{ '-pin': showPin, '-toggle': button.dropdown?.(), '-with-extra': button.name === 'bookmark' }"
       >
         <ActionButtonContainer
           :class="{ '-pin': showPin }"
@@ -30,7 +33,6 @@
           <FAIcon
             v-if="showPin && currentUser"
             fixed-width
-            class="fa-scale-110"
             icon="thumbtack"
           />
         </button>
@@ -38,6 +40,7 @@
       <Popover
         trigger="click"
         :trigger-attrs="triggerAttrs"
+        class="quick-action"
         :tabindex="0"
         placement="top"
         :offset="{ y: 5 }"
@@ -46,7 +49,7 @@
       >
         <template #trigger>
           <FAIcon
-            class="fa-scale-110 "
+            class="action-button-inner"
             icon="ellipsis-h"
           />
         </template>