chore: Add woot button to message context menu (#5638)

app/javascript/dashboard/components/widgets/conversation/Message.vue

@@ -420,6 +420,8 @@ export default {
 <style lang="scss">
 .wrap {
   > .bubble {
+    min-width: 128px;
+
     &.is-image,
     &.is-video {
       padding: 0;

app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue

@@ -12,9 +12,9 @@
     </woot-modal>
     <woot-button
       icon="more-vertical"
-      class="button--delete-message"
       color-scheme="secondary"
-      variant="link"
+      variant="clear"
+      size="small"
       @click="handleContextMenuClick"
     />
     <div
@@ -40,6 +40,7 @@
             variant="clear"
             size="small"
             icon="clipboard"
+            color-scheme="secondary"
             @click="handleCopy"
           >
             {{ $t('CONVERSATION.CONTEXT_MENU.COPY') }}
@@ -52,6 +53,7 @@
             variant="clear"
             size="small"
             icon="comment-add"
+            color-scheme="secondary"
             @click="showCannedResponseModal"
           >
             {{ $t('CONVERSATION.CONTEXT_MENU.CREATE_A_CANNED_RESPONSE') }}
@@ -132,12 +134,12 @@ export default {
 </script>
 <style lang="scss" scoped>
 .dropdown-pane {
-  bottom: var(--space-medium);
+  bottom: var(--space-large);
 }
 .dropdown-pane--left {
-  right: var(--space-small);
+  right: var(--space-minus-small);
 }
 .dropdown-pane--right {
-  left: var(--space-small);
+  left: var(--space-minus-small);
 }
 </style>

app/javascript/shared/components/ui/dropdown/DropdownItem.vue

@@ -35,6 +35,7 @@ export default {
     a,
     .button {
       display: inline-flex;
+      white-space: nowrap;
       width: 100%;
       text-align: left;
       color: var(--s-700);