From c7d6d098207e31e993ecb38d1137e085d27b1c59 Mon Sep 17 00:00:00 2001
From: James Garbutt <43081j@users.noreply.github.com>
Date: Fri, 13 Feb 2026 17:01:47 +0000
Subject: [PATCH] feat: switch dependency icons to be tappable tooltips

This changes the icons to be their own tappable (or clickable) icons
which then open their tooltips.

Before this change, there was no way to see them on mobile as a tap
would click the version link and change page.
---
 app/components/Package/Dependencies.vue | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
index 68d4848f2..2e518f9a1 100644
--- a/app/components/Package/Dependencies.vue
+++ b/app/components/Package/Dependencies.vue
@@ -120,20 +120,30 @@ const numberFormatter = useNumberFormatter()
           <span class="flex items-center gap-1 max-w-[40%]" dir="ltr">
             <TooltipApp
               v-if="outdatedDeps[dep]"
-              class="shrink-0 p-2 -m-2"
+              class="shrink-0"
               :class="getVersionClass(outdatedDeps[dep])"
-              aria-hidden="true"
               :text="getOutdatedTooltip(outdatedDeps[dep], $t)"
             >
-              <span class="i-lucide:circle-alert w-3 h-3" />
+              <button
+                type="button"
+                class="p-2 -m-2"
+                :aria-label="getOutdatedTooltip(outdatedDeps[dep], $t)"
+              >
+                <span class="i-lucide:circle-alert w-3 h-3" aria-hidden="true" />
+              </button>
             </TooltipApp>
             <TooltipApp
               v-if="replacementDeps[dep]"
-              class="shrink-0 p-2 -m-2 text-amber-700 dark:text-amber-500"
-              aria-hidden="true"
+              class="shrink-0 text-amber-700 dark:text-amber-500"
               :text="$t('package.dependencies.has_replacement')"
             >
-              <span class="i-carbon:idea w-3 h-3" />
+              <button
+                type="button"
+                class="p-2 -m-2"
+                :aria-label="$t('package.dependencies.has_replacement')"
+              >
+                <span class="i-lucide:lightbulb w-3 h-3" aria-hidden="true" />
+              </button>
             </TooltipApp>
             <LinkBase
               v-if="getVulnerableDepInfo(dep)"