quick actions improvements

src/components/status_action_buttons/action_button.scss

@@ -2,9 +2,7 @@
 /* stylelint-disable declaration-no-important */
 
 .quick-action {
-  display: grid;
-  grid-template-columns: minmax(max-content, 1fr);
-  grid-gap: 0.25em;
+  display: flex;
   align-items: center;
   height: 1.5em;
 
@@ -12,6 +10,7 @@
     overflow-x: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    margin-left: 1em;
   }
 
   .action-button-inner,
@@ -25,6 +24,7 @@
     align-self: stretch;
     width: 1px;
     background-color: var(--icon);
+    margin-left: 1em;
     margin-right: 0.5em;
   }
 
@@ -44,7 +44,7 @@
   .action-button-inner {
     display: grid;
     grid-gap: 1em;
-    grid-template-columns: max-content 1fr;
+    grid-template-columns: max-content;
     grid-auto-flow: column;
     grid-auto-columns: max-content;
     align-items: center;

src/components/status_action_buttons/action_button.vue

@@ -50,12 +50,6 @@
       >
         {{ $t(button.label(funcArg)) }}
       </span>
-      <span
-        v-if="!extra && button.counter?.(funcArg) > 0"
-        class="action-counter"
-      >
-        {{ button.counter?.(funcArg) }}
-      </span>
       <FAIcon
         v-if="button.dropdown?.()"
         class="chevron-icon"
@@ -64,15 +58,21 @@
         fixed-width
       />
     </component>
+    <span
+      v-if="!extra && button.counter?.(funcArg) > 0"
+      class="action-counter"
+    >
+      {{ button.counter?.(funcArg) }}
+    </span>
     <span
       v-if="!extra && button.name === 'bookmark'"
       class="separator"
     />
     <Popover
       v-if="button.name === 'bookmark'"
-      trigger="hover"
+      :trigger="extra ? 'hover' : 'click'"
       :placement="extra ? 'right' : 'top'"
-      :offset="{ y: 5 }"
+      :offset="extra ? { x: 10 } : { y: 10 }"
       :trigger-attrs="{ class: 'extra-button' }"
     >
       <template #trigger>

src/components/status_action_buttons/action_button_container.vue

@@ -2,7 +2,7 @@
   <div>
     <Popover
       v-if="button.dropdown?.()"
-      trigger="hover"
+      trigger="click"
       :offset="{ y: 5 }"
       :placement="$attrs.extra ? 'right' : 'top'"
     >