From 6a17ce32252b5eff4d7c30638f0add2f3e14a58b Mon Sep 17 00:00:00 2001
From: Philippe Serhal <philippe.serhal@gmail.com>
Date: Sun, 15 Mar 2026 10:23:04 -0400
Subject: [PATCH] fix: avoid slash as separator for numbers

A slash between numbers implies some sort of fraction or ratio. It isn't
intuitive what it means between two dependency counts and between sizes.
---
 app/pages/package/[[org]]/[name].vue | 44 +++++++++++++++-------------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index 4e337daf5..e02651df8 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -583,10 +583,8 @@ const showSkeleton = shallowRef(false)
                   <!-- Direct deps (muted) -->
                   <span class="text-fg-muted">{{ numberFormatter.format(dependencyCount) }}</span>
 
-                  <!-- Separator and total transitive deps -->
+                  <!-- Total transitive deps in parens -->
                   <template v-if="dependencyCount > 0 && dependencyCount !== totalDepsCount">
-                    <span class="text-fg-subtle">/</span>
-
                     <ClientOnly>
                       <span
                         v-if="
@@ -595,14 +593,16 @@ const showSkeleton = shallowRef(false)
                         "
                         class="inline-flex items-center gap-1 text-fg-subtle"
                       >
-                        <span class="i-svg-spinners:ring-resize w-3 h-3" aria-hidden="true" />
+                        (<span class="i-svg-spinners:ring-resize w-3 h-3" aria-hidden="true" />)
                       </span>
-                      <span v-else-if="totalDepsCount !== null">{{
-                        numberFormatter.format(totalDepsCount)
-                      }}</span>
-                      <span v-else class="text-fg-subtle">-</span>
+                      <span v-else-if="totalDepsCount !== null"
+                        ><span class="text-fg-subtle">(</span
+                        >{{ numberFormatter.format(totalDepsCount)
+                        }}<span class="text-fg-subtle">)</span></span
+                      >
+                      <span v-else class="text-fg-subtle">(-)</span>
                       <template #fallback>
-                        <span class="text-fg-subtle">-</span>
+                        <span class="text-fg-subtle">(-)</span>
                       </template>
                     </ClientOnly>
                   </template>
@@ -652,20 +652,22 @@ const showSkeleton = shallowRef(false)
                   <span v-else>-</span>
                 </span>
 
-                <!-- Separator and install size -->
+                <!-- Total install size in parens -->
                 <template v-if="displayVersion?.dist?.unpackedSize !== installSize?.totalSize">
-                  <span class="text-fg-subtle mx-1">/</span>
-
-                  <span
-                    v-if="installSizeStatus === 'pending'"
-                    class="inline-flex items-center gap-1 text-fg-subtle"
-                  >
-                    <span class="i-svg-spinners:ring-resize w-3 h-3" aria-hidden="true" />
-                  </span>
-                  <span v-else-if="installSize?.totalSize" dir="ltr">
-                    {{ bytesFormatter.format(installSize.totalSize) }}
+                  <span class="ms-1">
+                    <span
+                      v-if="installSizeStatus === 'pending'"
+                      class="inline-flex items-center gap-1 text-fg-subtle"
+                    >
+                      (<span class="i-svg-spinners:ring-resize w-3 h-3" aria-hidden="true" />)
+                    </span>
+                    <span v-else-if="installSize?.totalSize" dir="ltr">
+                      <span class="text-fg-subtle">(</span
+                      >{{ bytesFormatter.format(installSize.totalSize)
+                      }}<span class="text-fg-subtle">)</span>
+                    </span>
+                    <span v-else class="text-fg-subtle">(-)</span>
                   </span>
-                  <span v-else class="text-fg-subtle">-</span>
                 </template>
               </dd>
             </div>