pleroma-fe

commit: f944a08f25404dc0d75f066127f989b5722e6f6b
parent d25c2f04c9757918b17231b6cbee6031fdfe1f74
Author: Henry Jameson <me@hjkos.com>
Date:   Sat, 18 Jan 2025 21:44:46 +0200

alignment

Diffstat:
M
src/components/status_action_buttons/action_button.scss
36
++++++++++++++++++++----------------
M
src/components/status_action_buttons/status_action_buttons.scss
6
++++++

2 files changed, 26 insertions(+), 16 deletions(-)
diff --git a/src/components/status_action_buttons/action_button.scss b/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;
+    display: block;
+    align-self: stretch;
+    width: 1px;
+    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;
 
-    &::before {
-      content: "";
-      display: block;
-      width: 1px;
-      height: 1.5em;
-      background-color: var(--icon);
+    .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 {
diff --git a/src/components/status_action_buttons/status_action_buttons.scss b/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