From 06c20a5e57ac63f7f8e9955653c157c75011a90f Mon Sep 17 00:00:00 2001
From: brenoepics <git@breno.tech>
Date: Sat, 31 Jan 2026 16:39:14 -0300
Subject: [PATCH 1/3] fix: improve layout and accessibility of peer
 dependencies list

---
 app/components/PackageDependencies.vue | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/app/components/PackageDependencies.vue b/app/components/PackageDependencies.vue
index ebd3783fed..be26ec45ec 100644
--- a/app/components/PackageDependencies.vue
+++ b/app/components/PackageDependencies.vue
@@ -97,7 +97,7 @@ const sortedOptionalDependencies = computed(() => {
             >
               <span class="i-carbon:warning-alt w-3 h-3 block" />
             </span>
-            <span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
+            <span aria-hidden="true" class="shrink grow" />
             <NuxtLink
               v-if="getVulnerableDepInfo(dep)"
               :to="{
@@ -155,12 +155,12 @@ const sortedOptionalDependencies = computed(() => {
         <li
           v-for="peer in sortedPeerDependencies.slice(0, peerDepsExpanded ? undefined : 10)"
           :key="peer.name"
-          class="flex items-center justify-start py-1 text-sm gap-2"
+          class="flex items-center justify-between py-1 text-sm gap-2 min-w-0"
         >
-          <div class="flex items-center gap-2 min-w-0">
+          <div class="flex items-center gap-2 shrink-0">
             <NuxtLink
               :to="{ name: 'package', params: { package: peer.name.split('/') } }"
-              class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate"
+              class="font-mono text-fg-muted hover:text-fg transition-colors duration-200"
             >
               {{ peer.name }}
             </NuxtLink>
@@ -172,13 +172,12 @@ const sortedOptionalDependencies = computed(() => {
               {{ $t('package.dependencies.optional') }}
             </span>
           </div>
-          <span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
           <NuxtLink
             :to="{
               name: 'package',
               params: { package: [...peer.name.split('/'), 'v', peer.version] },
             }"
-            class="font-mono text-xs text-fg-subtle max-w-[40%] text-end truncate"
+            class="font-mono text-xs text-fg-subtle shrink-0"
             :title="peer.version"
           >
             {{ peer.version }}
@@ -221,7 +220,7 @@ const sortedOptionalDependencies = computed(() => {
           >
             {{ dep }}
           </NuxtLink>
-          <span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
+          <span aria-hidden="true" class="shrink grow" />
           <NuxtLink
             :to="{ name: 'package', params: { package: [...dep.split('/'), 'v', version] } }"
             class="font-mono text-xs text-fg-subtle max-w-[50%] text-end truncate"

From b2013d8c24b90eef91522e838a23a5b83c3fa9ea Mon Sep 17 00:00:00 2001
From: brenoepics <git@breno.tech>
Date: Sat, 31 Jan 2026 17:07:08 -0300
Subject: [PATCH 2/3] fix: adjust peer dependencies layout and enhance
 accessibility

---
 app/components/PackageDependencies.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/components/PackageDependencies.vue b/app/components/PackageDependencies.vue
index be26ec45ec..14cb217ef1 100644
--- a/app/components/PackageDependencies.vue
+++ b/app/components/PackageDependencies.vue
@@ -155,9 +155,9 @@ const sortedOptionalDependencies = computed(() => {
         <li
           v-for="peer in sortedPeerDependencies.slice(0, peerDepsExpanded ? undefined : 10)"
           :key="peer.name"
-          class="flex items-center justify-between py-1 text-sm gap-2 min-w-0"
+          class="flex items-center justify-between py-1 text-sm gap-1 min-w-0"
         >
-          <div class="flex items-center gap-2 shrink-0">
+          <div class="flex items-center gap-1 shrink-0">
             <NuxtLink
               :to="{ name: 'package', params: { package: peer.name.split('/') } }"
               class="font-mono text-fg-muted hover:text-fg transition-colors duration-200"
@@ -166,10 +166,11 @@ const sortedOptionalDependencies = computed(() => {
             </NuxtLink>
             <span
               v-if="peer.optional"
-              class="px-1 py-0.5 font-mono text-[10px] text-fg-subtle bg-bg-muted border border-border rounded shrink-0"
+              class="shrink-0 text-fg-muted hover:text-fg transition-colors duration-200 cursor-help inline-flex items-center"
               :title="$t('package.dependencies.optional')"
+              :aria-label="$t('package.dependencies.optional')"
             >
-              {{ $t('package.dependencies.optional') }}
+              <span aria-hidden="true" class="i-carbon:information w-3 h-3 block" />
             </span>
           </div>
           <NuxtLink

From d5a195b70dfc42c50d4191aecc1ab31031e9d61d Mon Sep 17 00:00:00 2001
From: brenoepics <git@breno.tech>
Date: Sat, 31 Jan 2026 17:28:51 -0300
Subject: [PATCH 3/3] fix: enhance accessibility for optional peer dependencies

---
 app/components/PackageDependencies.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/components/PackageDependencies.vue b/app/components/PackageDependencies.vue
index 14cb217ef1..093c69f4de 100644
--- a/app/components/PackageDependencies.vue
+++ b/app/components/PackageDependencies.vue
@@ -169,6 +169,7 @@ const sortedOptionalDependencies = computed(() => {
               class="shrink-0 text-fg-muted hover:text-fg transition-colors duration-200 cursor-help inline-flex items-center"
               :title="$t('package.dependencies.optional')"
               :aria-label="$t('package.dependencies.optional')"
+              role="img"
             >
               <span aria-hidden="true" class="i-carbon:information w-3 h-3 block" />
             </span>