diff --git a/src/components/status_action_buttons/action_button.scss b/src/components/status_action_buttons/action_button.scss
index df445391a..522494cee 100644
--- a/src/components/status_action_buttons/action_button.scss
+++ b/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 {
diff --git a/src/components/status_action_buttons/action_button.vue b/src/components/status_action_buttons/action_button.vue
index cab055e64..f4738a7e6 100644
--- a/src/components/status_action_buttons/action_button.vue
+++ b/src/components/status_action_buttons/action_button.vue
@@ -54,7 +54,6 @@
@@ -71,6 +70,7 @@
/>
diff --git a/src/components/status_action_buttons/status_action_buttons.scss b/src/components/status_action_buttons/status_action_buttons.scss
index 3bbcdeefb..72766673b 100644
--- a/src/components/status_action_buttons/status_action_buttons.scss
+++ b/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
diff --git a/src/components/status_action_buttons/status_action_buttons.vue b/src/components/status_action_buttons/status_action_buttons.vue
index c1d0d9571..c45c2e592 100644
--- a/src/components/status_action_buttons/status_action_buttons.vue
+++ b/src/components/status_action_buttons/status_action_buttons.vue
@@ -1,11 +1,14 @@