1 files changed, 24 insertions, 18 deletions

diff --git a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list_row.vue b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list_row.vue
index 8e89128a382..a3f58cc3323 100644
--- a/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list_row.vue
+++ b/app/assets/javascripts/packages_and_registries/container_registry/explorer/components/details_page/tags_list_row.vue
@@ -4,8 +4,7 @@ import {
   GlTooltipDirective,
   GlSprintf,
   GlIcon,
-  GlDropdown,
-  GlDropdownItem,
+  GlDisclosureDropdown,
 } from '@gitlab/ui';
 import { formatDate } from '~/lib/utils/datetime_utility';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
@@ -33,8 +32,7 @@ export default {
     GlSprintf,
     GlFormCheckbox,
     GlIcon,
-    GlDropdown,
-    GlDropdownItem,
+    GlDisclosureDropdown,
     ListItem,
     ClipboardButton,
     TimeAgoTooltip,
@@ -76,6 +74,22 @@ export default {
     COPY_IMAGE_PATH_TITLE,
   },
   computed: {
+    items() {
+      return [
+        {
+          text: this.$options.i18n.REMOVE_TAG_BUTTON_TITLE,
+          extraAttrs: {
+            class: 'gl-text-red-500!',
+            'data-testid': 'single-delete-button',
+            'data-qa-selector': 'tag_delete_button',
+          },
+          action: () => {
+            this.$emit('delete');
+          },
+        },
+      ];
+    },
+
     formattedSize() {
       return this.tag.totalSize
         ? numberToHumanSize(Number(this.tag.totalSize))
@@ -177,31 +191,23 @@ export default {
       </span>
     </template>
     <template v-if="tag.canDelete" #right-action>
-      <gl-dropdown
+      <gl-disclosure-dropdown
         :disabled="disabled"
         icon="ellipsis_v"
-        :text="$options.i18n.MORE_ACTIONS_TEXT"
+        :toggle-text="$options.i18n.MORE_ACTIONS_TEXT"
         :text-sr-only="true"
         category="tertiary"
         no-caret
-        right
+        placement="right"
         :class="{ 'gl-opacity-0 gl-pointer-events-none': disabled }"
         data-testid="additional-actions"
         data-qa-selector="more_actions_menu"
-      >
-        <gl-dropdown-item
-          variant="danger"
-          data-testid="single-delete-button"
-          data-qa-selector="tag_delete_button"
-          @click="$emit('delete')"
-        >
-          {{ $options.i18n.REMOVE_TAG_BUTTON_TITLE }}
-        </gl-dropdown-item>
-      </gl-dropdown>
+        :items="items"
+      />
     </template>
 
     <template v-if="!isInvalidTag" #details-published>
-      <details-row icon="clock" data-testid="published-date-detail">
+      <details-row icon="clock" padding="gl-py-3" data-testid="published-date-detail">
         <gl-sprintf :message="$options.i18n.PUBLISHED_DETAILS_ROW_TEXT">
           <template #repositoryPath>
             <i>{{ tagLocation }}</i>