alignment

src/components/status_action_buttons/action_button.scss

@@ -3,8 +3,10 @@
 
 .quick-action {
   display: grid;
-  grid-template-columns: max-content;
+  grid-template-columns: minmax(max-content, 1fr);
   grid-gap: 0.25em;
+  align-items: center;
+  height: 1.5em;
 
   .action-counter {
     overflow-x: hidden;
@@ -12,14 +14,6 @@
     white-space: nowrap;
   }
 
-  &.-pin {
-    margin: calc(-2px - 0.25em);
-    padding: 0.25em;
-    border: 2px dashed var(--icon);
-    border-radius: var(--roundness);
-    grid-template-columns: 1fr auto;
-  }
-
   .action-button-inner,
   .extra-button {
     margin: -0.5em;
@@ -27,14 +21,23 @@
   }
 
   .separator {
-    width: 0.5em;
-
-    &::before {
-      content: "";
     display: block;
+    align-self: stretch;
     width: 1px;
-      height: 1.5em;
     background-color: var(--icon);
+    margin-right: 0.5em;
+  }
+
+  &.-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;
+
+    .extra-button,
+    .separator {
+      display: none;
     }
   }
 
@@ -51,6 +54,7 @@
 .action-button {
   display: grid;
   grid-auto-flow: column;
+  align-items: center;
   padding: 0;
 
   .action-button-inner {

src/components/status_action_buttons/status_action_buttons.scss

@@ -8,6 +8,12 @@
     grid-auto-rows: 1fr;
     grid-gap: 1.25em 1em;
     margin-top: var(--status-margin);
+    align-items: baseline;
+  }
+
+  .pin-action-button {
+    margin: -0.5em;
+    padding: 0.5em;
   }
 }
 // popover