forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: display data more compactly on mobile (#72)
+10
-8
+10
-8
app/pages/[...package].vue
+10
-8
app/pages/[...package].vue
···
281
281
<header class="mb-8 pb-8 border-b border-border">
282
282
<div class="mb-4">
283
283
<!-- Package name and version -->
284
-
<div class="flex items-start gap-3 mb-2 flex-wrap min-w-0">
284
+
<div class="flex items-start gap-2 mb-1.5 sm:gap-3 sm:mb-2 flex-wrap min-w-0">
285
285
<h1
286
286
class="font-mono text-2xl sm:text-3xl font-medium min-w-0 break-words"
287
287
:title="pkg.name"
···
311
311
"
312
312
:title="`v${displayVersion.version}`"
313
313
>
314
-
<span class="truncate max-w-32 sm:max-w-48"> v{{ displayVersion.version }} </span>
314
+
<span class="truncate max-w-24 sm:max-w-32 md:max-w-48">
315
+
v{{ displayVersion.version }}
316
+
</span>
315
317
<span
316
318
v-if="
317
319
requestedVersion &&
···
370
372
</div>
371
373
372
374
<!-- Stats grid -->
373
-
<dl class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4 mt-6">
375
+
<dl class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-3 sm:gap-4 mt-4 sm:mt-6">
374
376
<div v-if="pkg.license" class="space-y-1">
375
377
<dt class="text-xs text-fg-subtle uppercase tracking-wider">License</dt>
376
378
<dd class="font-mono text-sm text-fg">
···
413
415
</dd>
414
416
</div>
415
417
416
-
<div class="space-y-1 col-span-2">
418
+
<div class="space-y-1 sm:col-span-2">
417
419
<dt class="text-xs text-fg-subtle uppercase tracking-wider flex items-center gap-1">
418
420
Install Size
419
421
<span
···
460
462
461
463
<!-- Links -->
462
464
<nav aria-label="Package links" class="mt-6">
463
-
<ul class="flex flex-wrap items-center gap-4 list-none m-0 p-0">
465
+
<ul class="flex flex-wrap items-center gap-3 sm:gap-4 list-none m-0 p-0">
464
466
<li v-if="repositoryUrl">
465
467
<a
466
468
:href="repositoryUrl"
···
596
598
<div class="relative group">
597
599
<!-- Terminal-style install command -->
598
600
<div class="bg-[#0d0d0d] border border-border rounded-lg overflow-hidden">
599
-
<div class="flex gap-1.5 px-4 pt-3">
601
+
<div class="flex gap-1.5 px-3 pt-2 sm:px-4 sm:pt-3">
600
602
<span class="w-2.5 h-2.5 rounded-full bg-[#333]" />
601
603
<span class="w-2.5 h-2.5 rounded-full bg-[#333]" />
602
604
<span class="w-2.5 h-2.5 rounded-full bg-[#333]" />
603
605
</div>
604
-
<div class="flex items-center gap-2 px-4 pt-3 pb-4">
606
+
<div class="flex items-center gap-2 px-3 pt-2 pb-3 sm:px-4 sm:pt-3 sm:pb-4">
605
607
<span class="text-fg-subtle font-mono text-sm select-none">$</span>
606
608
<code class="font-mono text-sm"
607
609
><ClientOnly
···
651
653
</div>
652
654
653
655
<!-- Sidebar -->
654
-
<aside class="order-1 lg:order-2 space-y-8 min-w-0 overflow-hidden">
656
+
<aside class="order-1 lg:order-2 space-y-6 sm:space-y-8 min-w-0 overflow-hidden">
655
657
<!-- Maintainers (with admin actions when connected) -->
656
658
<PackageMaintainers :package-name="pkg.name" :maintainers="pkg.maintainers" />
657
659