From 1229bd2f486ca9fb97336baa6fcbdf2f8e949894 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 18 Jan 2025 19:15:26 +0200
Subject: [PATCH 1/7] use auto-fill instead of fixed column count

---
 src/App.scss                                                  | 2 --
 .../status_action_buttons/status_action_buttons.scss          | 2 +-
 src/components/user_card/user_card.scss                       | 4 ----
 3 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 081ce2fdb..1b781304e 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -339,8 +339,6 @@ nav {
     grid-template-areas: "content";
     padding: 0;
 
-    --_actionsColumnCount: 3;
-
     .column {
       padding-top: 0;
       margin: var(--navbar-height) 0 0 0;
diff --git a/src/components/status_action_buttons/status_action_buttons.scss b/src/components/status_action_buttons/status_action_buttons.scss
index e18083513..89f9ade82 100644
--- a/src/components/status_action_buttons/status_action_buttons.scss
+++ b/src/components/status_action_buttons/status_action_buttons.scss
@@ -3,7 +3,7 @@
 .StatusActionButtons {
   .quick-action-buttons {
     display: grid;
-    grid-template-columns: repeat(var(--_actionsColumnCount, 6), 1fr);
+    grid-template-columns: repeat(auto-fill, 6em);
     grid-auto-flow: row dense;
     grid-auto-rows: 1fr;
     grid-gap: 1.25em 1em;
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 13ef610c6..843f46e4c 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -292,10 +292,6 @@
   }
 }
 
-#sidebar {
-  --_actionsColumnCount: 4;
-}
-
 .sidebar .edit-profile-button {
   display: none;
 }

From ee8008ef93319237ccc210b4f5c20c627a66b81f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 18 Jan 2025 19:31:20 +0200
Subject: [PATCH 2/7] fix external link not working

---
 src/components/status_action_buttons/action_button.js        | 3 ++-
 src/components/status_action_buttons/action_button.vue       | 5 +++--
 .../status_action_buttons/action_button_container.vue        | 1 -
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/status_action_buttons/action_button.js b/src/components/status_action_buttons/action_button.js
index b87e07687..193a96ee9 100644
--- a/src/components/status_action_buttons/action_button.js
+++ b/src/components/status_action_buttons/action_button.js
@@ -112,11 +112,12 @@ export default {
         this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
       }
     },
-    doActionWrap (button) {
+    doActionWrap (button, close) {
       if (button.name === 'emoji') {
         this.$refs.picker.showPicker()
       } else {
         this.getComponent(button) === 'button' && this.doAction(button)
+        close()
       }
     }
   }
diff --git a/src/components/status_action_buttons/action_button.vue b/src/components/status_action_buttons/action_button.vue
index 40d3397c5..b9dca8818 100644
--- a/src/components/status_action_buttons/action_button.vue
+++ b/src/components/status_action_buttons/action_button.vue
@@ -8,11 +8,12 @@
       class="action-button-inner"
       :class="buttonInnerClass"
       role="menuitem"
+      type="button"
+      target="_blank"
       :tabindex="0"
       :disabled="buttonClass.disabled"
       :href="getComponent(button) == 'a' ? button.link?.(funcArg) || getRemoteInteractionLink : undefined"
-      @click.prevent="doActionWrap(button)"
-      @click="button.name === 'emoji' ? () => {} : close()"
+      @click="doActionWrap(button, close)"
     >
       <FALayers>
         <FAIcon
diff --git a/src/components/status_action_buttons/action_button_container.vue b/src/components/status_action_buttons/action_button_container.vue
index 0cde21efc..407fd15fe 100644
--- a/src/components/status_action_buttons/action_button_container.vue
+++ b/src/components/status_action_buttons/action_button_container.vue
@@ -6,7 +6,6 @@
       v-if="button.dropdown?.()"
     >
       <template #trigger>
-        {{ props }}
         <ActionButton
           :button="button"
           :status="status"

From 3786402963f70036a2a785ebc3145e6663654886 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 18 Jan 2025 19:44:12 +0200
Subject: [PATCH 3/7] better overflow, denser layout

---
 src/components/status_action_buttons/action_button.scss   | 8 +++++++-
 .../status_action_buttons/status_action_buttons.scss      | 2 +-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/status_action_buttons/action_button.scss b/src/components/status_action_buttons/action_button.scss
index fe4983946..81e64aa93 100644
--- a/src/components/status_action_buttons/action_button.scss
+++ b/src/components/status_action_buttons/action_button.scss
@@ -6,6 +6,12 @@
   grid-template-columns: max-content;
   grid-gap: 0.25em;
 
+  .action-counter {
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   &.-pin {
     margin: calc(-2px - 0.25em);
     padding: 0.25em;
@@ -35,7 +41,7 @@
   .action-button-inner {
     display: grid;
     grid-gap: 1em;
-    grid-template-columns: max-content max-content;
+    grid-template-columns: max-content 1fr;
     grid-auto-flow: column;
     grid-auto-columns: max-content;
     align-items: center;
diff --git a/src/components/status_action_buttons/status_action_buttons.scss b/src/components/status_action_buttons/status_action_buttons.scss
index 89f9ade82..2764356c0 100644
--- a/src/components/status_action_buttons/status_action_buttons.scss
+++ b/src/components/status_action_buttons/status_action_buttons.scss
@@ -3,7 +3,7 @@
 .StatusActionButtons {
   .quick-action-buttons {
     display: grid;
-    grid-template-columns: repeat(auto-fill, 6em);
+    grid-template-columns: repeat(auto-fill, 5em);
     grid-auto-flow: row dense;
     grid-auto-rows: 1fr;
     grid-gap: 1.25em 1em;

From 9ddf70ce466baa292f82d8d4acff24c3bfb8802d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 18 Jan 2025 20:49:39 +0200
Subject: [PATCH 4/7] fix errors

---
 src/components/status_action_buttons/status_action_buttons.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/status_action_buttons/status_action_buttons.vue b/src/components/status_action_buttons/status_action_buttons.vue
index a3b50975a..62e1745dc 100644
--- a/src/components/status_action_buttons/status_action_buttons.vue
+++ b/src/components/status_action_buttons/status_action_buttons.vue
@@ -16,7 +16,7 @@
           :get-class="getClass"
           :get-component="getComponent"
           :animation-state="animationState"
-          :close="close"
+          :close="() => {}"
           :do-action="doAction"
         />
         <button

From d25c2f04c9757918b17231b6cbee6031fdfe1f74 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 18 Jan 2025 21:21:09 +0200
Subject: [PATCH 5/7] resize popover when toggling editing pinned items

---
 src/components/popover/popover.js             | 19 ++++++++++++-------
 src/components/popover/popover.vue            |  1 +
 .../status_action_buttons.vue                 |  5 ++---
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index 6b49cf682..242068109 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -275,6 +275,11 @@ const Popover = {
       this.scrollable.removeEventListener('scroll', this.onScroll)
       this.scrollable.removeEventListener('resize', this.onResize)
     },
+    resizePopover () {
+      setTimeout(() => {
+        this.updateStyles()
+      }, 1)
+    },
     onMouseenter (e) {
       if (this.trigger === 'hover') {
         this.lockReEntry = false
@@ -323,7 +328,12 @@ const Popover = {
       this.updateStyles()
     },
     onResize (e) {
-      this.updateStyles()
+      const content = this.$refs.content
+      if (!content) return
+      if (this.oldSize.width !== content.offsetWidth || this.oldSize.height !== content.offsetHeight) {
+        this.updateStyles()
+        this.oldSize = { width: content.offsetWidth, height: content.offsetHeight }
+      }
     },
     onChildPopoverState (childRef, state) {
       if (state) {
@@ -337,12 +347,7 @@ const Popover = {
     // Monitor changes to content size, update styles only when content sizes have changed,
     // that should be the only time we need to move the popover box if we don't care about scroll
     // or resize
-    const content = this.$refs.content
-    if (!content) return
-    if (this.oldSize.width !== content.offsetWidth || this.oldSize.height !== content.offsetHeight) {
-      this.updateStyles()
-      this.oldSize = { width: content.offsetWidth, height: content.offsetHeight }
-    }
+    this.onResize()
   },
   mounted () {
     this.teleport = true
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 33817fa6a..f91abc3f0 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -33,6 +33,7 @@
             name="content"
             class="popover-inner"
             :close="hidePopover"
+            :resize="resizePopover"
           />
         </div>
       </transition>
diff --git a/src/components/status_action_buttons/status_action_buttons.vue b/src/components/status_action_buttons/status_action_buttons.vue
index 62e1745dc..4ee11f4b9 100644
--- a/src/components/status_action_buttons/status_action_buttons.vue
+++ b/src/components/status_action_buttons/status_action_buttons.vue
@@ -41,7 +41,6 @@
         :tabindex="0"
         placement="top"
         :offset="{ y: 5 }"
-        :bound-to="{ x: 'container' }"
         remove-padding
         @show="onShow"
         @close="onClose"
@@ -52,7 +51,7 @@
             icon="ellipsis-h"
           />
         </template>
-        <template #content="{close}">
+        <template #content="{close, resize}">
           <div
             :id="`popup-menu-${randomSeed}`"
             class="dropdown-menu extra-action-buttons"
@@ -63,7 +62,7 @@
                 class="main-button"
                 role="menuitem"
                 :tabindex="0"
-                @click.stop="showPin = !showPin"
+                @click.stop="() => { resize(); showPin = !showPin }"
               >
                 <FAIcon
                   class="fa-scale-110"

From f944a08f25404dc0d75f066127f989b5722e6f6b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 18 Jan 2025 21:44:46 +0200
Subject: [PATCH 6/7] alignment

---
 .../status_action_buttons/action_button.scss  | 36 ++++++++++---------
 .../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
index 81e64aa93..14bfdfa9d 100644
--- 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;
+  }
 
-    &::before {
-      content: "";
-      display: block;
-      width: 1px;
-      height: 1.5em;
-      background-color: var(--icon);
+  &.-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 {
diff --git a/src/components/status_action_buttons/status_action_buttons.scss b/src/components/status_action_buttons/status_action_buttons.scss
index 2764356c0..4acf4a072 100644
--- 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

From ca8e3cea8d1c852075105e7e1eac3161349f53f2 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 18 Jan 2025 21:44:56 +0200
Subject: [PATCH 7/7] stop editing pins on popover close

---
 src/components/status_action_buttons/status_action_buttons.js  | 3 +++
 src/components/status_action_buttons/status_action_buttons.vue | 3 +--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/status_action_buttons/status_action_buttons.js b/src/components/status_action_buttons/status_action_buttons.js
index 45dac0dc1..a86c6044b 100644
--- a/src/components/status_action_buttons/status_action_buttons.js
+++ b/src/components/status_action_buttons/status_action_buttons.js
@@ -105,6 +105,9 @@ const StatusActionButtons = {
         .catch(err => this.$emit('onError', err.error.error))
         .finally(() => setTimeout(() => { this.animationState[button.name] = false }))
     },
+    onExtraClose () {
+      this.showPin = false
+    },
     isPinned (button) {
       return this.pinnedItems.has(button.name)
     },
diff --git a/src/components/status_action_buttons/status_action_buttons.vue b/src/components/status_action_buttons/status_action_buttons.vue
index 4ee11f4b9..81e000e7b 100644
--- a/src/components/status_action_buttons/status_action_buttons.vue
+++ b/src/components/status_action_buttons/status_action_buttons.vue
@@ -42,8 +42,7 @@
         placement="top"
         :offset="{ y: 5 }"
         remove-padding
-        @show="onShow"
-        @close="onClose"
+        @close="onExtraClose"
       >
         <template #trigger>
           <FAIcon