From 8d85c370b40646e2bdc3320f35b624c4508f761e Mon Sep 17 00:00:00 2001
From: ayuwidyaagata <ayuwagata@gmail.com>
Date: Sun, 12 Jul 2026 10:32:22 +0700
Subject: [PATCH 1/2] fix: prevent peer dependency layout overlap

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

diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
index 03aec33d8d..317e53c414 100644
--- a/app/components/Package/Dependencies.vue
+++ b/app/components/Package/Dependencies.vue
@@ -238,16 +238,24 @@ 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%] break-words" dir="ltr">
+            <LinkBase
+              :to="packageRoute(peer.name)"
+              class="block flex-1 min-w-0 break-all"
+              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')"
+              class="shrink-0"
+            >
               {{ $t('package.dependencies.optional') }}
             </TagStatic>
           </div>
           <LinkBase
             :to="packageRoute(peer.name, peer.version)"
-            class="block truncate max-w-[30%]"
+            class="block truncate shrink-0 max-w-32"
             :title="peer.version"
             dir="ltr"
           >

From add37b793a01eb730f831296f4130125578067d7 Mon Sep 17 00:00:00 2001
From: ayuwidyaagata <ayuwagata@gmail.com>
Date: Mon, 13 Jul 2026 12:52:52 +0700
Subject: [PATCH 2/2] fix: preserve peer dependency layout in RTL

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

diff --git a/app/components/Package/Dependencies.vue b/app/components/Package/Dependencies.vue
index 317e53c414..76df6e4a77 100644
--- a/app/components/Package/Dependencies.vue
+++ b/app/components/Package/Dependencies.vue
@@ -238,11 +238,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 flex-1 min-w-0 break-all"
-              dir="ltr"
-            >
+            <LinkBase :to="packageRoute(peer.name)" class="block min-w-0 break-all" dir="ltr">
               {{ peer.name }}
             </LinkBase>
             <TagStatic
@@ -255,7 +251,7 @@ const numberFormatter = useNumberFormatter()
           </div>
           <LinkBase
             :to="packageRoute(peer.name, peer.version)"
-            class="block truncate shrink-0 max-w-32"
+            class="block truncate shrink-0 max-w-20"
             :title="peer.version"
             dir="ltr"
           >