[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 entire description for each package

+3 -49
+3 -49
app/pages/[...package].vue
··· 310 310 return packageAnalysis.value.createPackage 311 311 }) 312 312 313 - // Expandable description 314 - const descriptionExpanded = ref(false) 315 - const descriptionRef = useTemplateRef('descriptionRef') 316 - const descriptionOverflows = ref(false) 317 - 318 - // Check if description overflows on mount/update 319 - function checkDescriptionOverflow() { 320 - if (descriptionRef.value) { 321 - const paragraph = descriptionRef.value.querySelector('p') 322 - if (paragraph) { 323 - // Compare scrollHeight to the fixed container height (3 lines ~= 72px) 324 - descriptionOverflows.value = paragraph.scrollHeight > 72 325 - } 326 - } 327 - } 328 - 329 - watch( 330 - () => pkg.value?.description, 331 - () => { 332 - descriptionExpanded.value = false 333 - nextTick(checkDescriptionOverflow) 334 - }, 335 - ) 336 - 337 - onMounted(() => { 338 - nextTick(checkDescriptionOverflow) 339 - }) 340 - 341 313 // Canonical URL for this package page 342 314 const canonicalUrl = computed(() => { 343 315 const base = `https://npmx.dev/${packageName.value}` ··· 517 489 </nav> 518 490 </div> 519 491 520 - <!-- Fixed height description container to prevent CLS --> 521 - <div ref="descriptionRef" class="relative max-w-2xl min-h-[4.5rem]"> 522 - <p 523 - v-if="pkg.description" 524 - class="text-fg-muted text-base m-0 overflow-hidden" 525 - :class="descriptionExpanded ? '' : 'max-h-[4.5rem]'" 526 - > 492 + <!-- Description container with min-height to prevent CLS --> 493 + <div class="max-w-2xl min-h-[4.5rem]"> 494 + <p v-if="pkg.description" class="text-fg-muted text-base m-0"> 527 495 <MarkdownText :text="pkg.description" /> 528 496 </p> 529 497 <p v-else class="text-fg-subtle text-base m-0 italic"> 530 498 {{ $t('package.no_description') }} 531 499 </p> 532 - <!-- Fade overlay with show more button - only when collapsed and overflowing --> 533 - <div 534 - v-if="pkg.description && descriptionOverflows && !descriptionExpanded" 535 - class="absolute bottom-0 inset-is-0 inset-ie-0 h-10 bg-gradient-to-t from-bg via-bg/90 to-transparent flex items-end justify-end" 536 - > 537 - <button 538 - type="button" 539 - class="font-mono text-xs text-fg-muted hover:text-fg bg-bg px-1 transition-colors duration-200 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50" 540 - :aria-label="$t('package.show_full_description')" 541 - @click="descriptionExpanded = true" 542 - > 543 - {{ $t('common.show_more') }} 544 - </button> 545 - </div> 546 500 </div> 547 501 548 502 <!-- External links -->