[READ-ONLY] a fast, modern browser for the npm registry
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix: display data more compactly on mobile (#72)

authored by

abeer0 and committed by
GitHub
ef404ab3 b9edee14

+10 -8
+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