Add UX improvements

app/assets/javascripts/issues/show/components/description.vue

@@ -98,6 +98,7 @@ export default {
     const workItemId = getParameterByName('work_item_id');
 
     return {
+      hasTaskListItemActions: false,
       preAnimation: false,
       pulseAnimation: false,
       initialUpdate: true,
@@ -367,6 +368,7 @@ export default {
 
         this.addPointerEventListeners(item, '.task-list-item-actions');
         this.insertNextToTaskListItemText(this.createTaskListItemActions(), item);
+        this.hasTaskListItemActions = true;
       });
     },
     addHoverListeners(taskLink, id) {
@@ -491,6 +493,7 @@ export default {
       :class="{
         'issue-realtime-pre-pulse': preAnimation,
         'issue-realtime-trigger-pulse': pulseAnimation,
+        'has-task-list-item-actions': hasTaskListItemActions,
       }"
       class="md"
     ></div>

app/assets/javascripts/issues/show/components/task_list_item_actions.vue

 <script>
-import { GlDropdown, GlDropdownItem, GlIcon } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
 import eventHub from '../event_hub';
 
@@ -11,7 +11,6 @@ export default {
   components: {
     GlDropdown,
     GlDropdownItem,
-    GlIcon,
   },
   methods: {
     deleteTaskListItem() {
@@ -25,15 +24,15 @@ export default {
   <gl-dropdown
     class="task-list-item-actions-wrapper"
     category="tertiary"
+    icon="ellipsis_v"
     lazy
+    right
+    no-caret
     size="small"
-    toggle-class="task-list-item-actions gl-opacity-0 gl-p-0!"
+    :text="$options.i18n.taskActions"
+    text-sr-only
+    toggle-class="task-list-item-actions gl-opacity-0"
   >
-    <template #button-content>
-      <gl-icon class="gl-mr-0!" name="ellipsis_v" />
-      <span class="gl-sr-only">{{ $options.i18n.taskActions }}</span>
-    </template>
-
     <gl-dropdown-item variant="danger" @click="deleteTaskListItem">
       {{ $options.i18n.delete }}
     </gl-dropdown-item>

app/assets/stylesheets/page_bundles/issues_show.scss

@@ -15,8 +15,8 @@
 
     .task-list-item-actions-wrapper {
       position: absolute;
-      inset-block-start: 0.3rem;
-      inset-inline-end: -0.3rem;
+      inset-block-start: -0.3rem;
+      inset-inline-end: -1.5rem;
     }
 
     .task-list-item-actions-wrapper.show .task-list-item-actions,
@@ -25,6 +25,10 @@
     }
   }
 
+  .md.has-task-list-item-actions > :is(ul, ol) > li {
+    margin-inline-end: 1.5rem;
+  }
+
   ul.task-list > li.task-list-item {
     margin-inline-start: 0.5rem !important; /* Override typography.scss */