From d4edac529ae9f75eb841343c41dc561ef56a27b4 Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Wed, 4 Mar 2026 22:48:02 +0100
Subject: [PATCH 1/3] fix(ui): dependency name readability

---
 app/components/Package/Dependencies.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
index 4b8fed12a2..10c72cecc4 100644
--- a/app/components/Package/Dependencies.vue
+++ b/app/components/Package/Dependencies.vue
@@ -218,17 +218,17 @@ const numberFormatter = useNumberFormatter()
           :key="peer.name"
           class="flex items-center justify-between py-1 text-sm gap-1 min-w-0"
         >
-          <div class="flex items-center gap-1 min-w-0 flex-1">
-            <LinkBase :to="packageRoute(peer.name)" class="block truncate" dir="ltr">
+          <div class="flex items-center gap-2 min-w-0 flex-1">
+            <LinkBase :to="packageRoute(peer.name)" class="block max-w-[70%]" dir="ltr">
               {{ peer.name }}
             </LinkBase>
-            <TagStatic v-if="peer.optional" :title="$t('package.dependencies.optional')">
+            <!-- <TagStatic v-if="peer.optional" :title="$t('package.dependencies.optional')">
               {{ $t('package.dependencies.optional') }}
-            </TagStatic>
+            </TagStatic> -->
           </div>
           <LinkBase
             :to="packageRoute(peer.name, peer.version)"
-            class="block truncate max-w-[40%]"
+            class="block truncate max-w-[30%]"
             :title="peer.version"
             dir="ltr"
           >
@@ -278,9 +278,9 @@ const numberFormatter = useNumberFormatter()
             optionalDepsExpanded ? undefined : 10,
           )"
           :key="dep"
-          class="flex items-center justify-between py-1 text-sm gap-2"
+          class="flex items-baseline justify-between py-1 text-sm gap-2"
         >
-          <LinkBase :to="packageRoute(dep)" class="block truncate" dir="ltr">
+          <LinkBase :to="packageRoute(dep)" class="block max-w-[80%]" dir="ltr">
             {{ dep }}
           </LinkBase>
           <LinkBase

From 4cc7485071a251041f8ef710c02c168ef47c9662 Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Wed, 4 Mar 2026 23:00:45 +0100
Subject: [PATCH 2/3] fix: add tag back

---
 app/components/Package/Dependencies.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
index 10c72cecc4..9f389285b1 100644
--- a/app/components/Package/Dependencies.vue
+++ b/app/components/Package/Dependencies.vue
@@ -222,9 +222,9 @@ const numberFormatter = useNumberFormatter()
             <LinkBase :to="packageRoute(peer.name)" class="block max-w-[70%]" dir="ltr">
               {{ peer.name }}
             </LinkBase>
-            <!-- <TagStatic v-if="peer.optional" :title="$t('package.dependencies.optional')">
+            <TagStatic v-if="peer.optional" :title="$t('package.dependencies.optional')">
               {{ $t('package.dependencies.optional') }}
-            </TagStatic> -->
+            </TagStatic>
           </div>
           <LinkBase
             :to="packageRoute(peer.name, peer.version)"

From 5a19c2e4f5cf00039f65f9cda068efaa7af701b2 Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Wed, 4 Mar 2026 23:24:12 +0100
Subject: [PATCH 3/3] feat: add break-words

---
 app/components/Package/Dependencies.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
index 9f389285b1..817aa2458e 100644
--- a/app/components/Package/Dependencies.vue
+++ b/app/components/Package/Dependencies.vue
@@ -219,7 +219,7 @@ const numberFormatter = useNumberFormatter()
           class="flex items-center justify-between py-1 text-sm gap-1 min-w-0"
         >
           <div class="flex items-center gap-2 min-w-0 flex-1">
-            <LinkBase :to="packageRoute(peer.name)" class="block max-w-[70%]" dir="ltr">
+            <LinkBase :to="packageRoute(peer.name)" class="block max-w-[70%] break-words" dir="ltr">
               {{ peer.name }}
             </LinkBase>
             <TagStatic v-if="peer.optional" :title="$t('package.dependencies.optional')">
@@ -280,7 +280,7 @@ const numberFormatter = useNumberFormatter()
           :key="dep"
           class="flex items-baseline justify-between py-1 text-sm gap-2"
         >
-          <LinkBase :to="packageRoute(dep)" class="block max-w-[80%]" dir="ltr">
+          <LinkBase :to="packageRoute(dep)" class="block max-w-[80%] break-words" dir="ltr">
             {{ dep }}
           </LinkBase>
           <LinkBase