forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: polish versions layout (#621)
Co-authored-by: brenoepics <git@breno.tech>
authored by
Alex Savelyev
brenoepics
and committed by
GitHub
cefc172b
88b8e90e
+9
-12
+9
-12
app/components/PackageDependencies.vue
+9
-12
app/components/PackageDependencies.vue
···
79
79
<li
80
80
v-for="[dep, version] in sortedDependencies.slice(0, depsExpanded ? undefined : 10)"
81
81
:key="dep"
82
-
class="flex items-center justify-start py-1 text-sm gap-2"
82
+
class="flex items-center justify-between py-1 text-sm gap-2"
83
83
>
84
84
<NuxtLink
85
85
:to="{ name: 'package', params: { package: dep.split('/') } }"
86
-
class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate min-w-0"
86
+
class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate min-w-0 flex-1"
87
87
>
88
88
{{ dep }}
89
89
</NuxtLink>
90
-
<span class="flex items-center gap-1">
90
+
<span class="flex items-center gap-1 max-w-[40%]">
91
91
<span
92
92
v-if="outdatedDeps[dep]"
93
93
class="shrink-0"
···
97
97
>
98
98
<span class="i-carbon:warning-alt w-3 h-3 block" />
99
99
</span>
100
-
<span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
101
100
<NuxtLink
102
101
v-if="getVulnerableDepInfo(dep)"
103
102
:to="{
···
174
173
<li
175
174
v-for="peer in sortedPeerDependencies.slice(0, peerDepsExpanded ? undefined : 10)"
176
175
:key="peer.name"
177
-
class="flex items-center justify-start py-1 text-sm gap-2"
176
+
class="flex items-center justify-between py-1 text-sm gap-1 min-w-0"
178
177
>
179
-
<div class="flex items-center gap-2 min-w-0">
178
+
<div class="flex items-center gap-1 min-w-0 flex-1">
180
179
<NuxtLink
181
180
:to="{
182
181
name: 'package',
···
194
193
{{ $t('package.dependencies.optional') }}
195
194
</span>
196
195
</div>
197
-
<span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
198
196
<NuxtLink
199
197
:to="{
200
198
name: 'package',
201
199
params: { package: [...peer.name.split('/'), 'v', peer.version] },
202
200
}"
203
-
class="font-mono text-xs text-fg-subtle max-w-[40%] text-end truncate"
201
+
class="font-mono text-xs text-fg-subtle max-w-[40%] truncate"
204
202
:title="peer.version"
205
203
>
206
204
{{ peer.version }}
···
241
239
optionalDepsExpanded ? undefined : 10,
242
240
)"
243
241
:key="dep"
244
-
class="flex items-center justify-start py-1 text-sm gap-2"
242
+
class="flex items-center justify-between py-1 text-sm gap-2"
245
243
>
246
244
<NuxtLink
247
245
:to="{ name: 'package', params: { package: dep.split('/') } }"
248
-
class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate min-w-0"
246
+
class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate min-w-0 flex-1"
249
247
>
250
248
{{ dep }}
251
249
</NuxtLink>
252
-
<span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
253
250
<NuxtLink
254
251
:to="{
255
252
name: 'package',
256
253
params: { package: [...dep.split('/'), 'v', version] },
257
254
}"
258
-
class="font-mono text-xs text-fg-subtle max-w-[50%] text-end truncate"
255
+
class="font-mono text-xs text-fg-subtle max-w-[40%] text-end truncate"
259
256
:title="version"
260
257
>
261
258
{{ version }}