Skip to content

Commit 4f26878

Browse files
YFAntYFAnt
committed
Revert "feat: versions can scroll when version is more"
This reverts commit d9614c4.
1 parent eee891c commit 4f26878

1 file changed

Lines changed: 143 additions & 145 deletions

File tree

‎app/components/PackageVersions.vue‎

Lines changed: 143 additions & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -372,7 +372,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
372372
<!-- Expanded versions -->
373373
<div
374374
v-if="expandedTags.has(row.tag) && getTagVersions(row.tag).length > 1"
375-
class="ml-4 pl-2 border-l border-border space-y-0.5 max-h-80 overflow-y-auto pr-2"
375+
class="ml-4 pl-2 border-l border-border space-y-0.5"
376376
>
377377
<div v-for="v in getTagVersions(row.tag).slice(1)" :key="v.version" class="py-1">
378378
<div class="flex items-center justify-between gap-2">
@@ -449,173 +449,171 @@ function getTagVersions(tag: string): VersionDisplay[] {
449449
</button>
450450

451451
<!-- Expanded other versions -->
452-
<div v-if="otherVersionsExpanded" class="ml-4 pl-2 border-l border-border">
453-
<div class="space-y-0.5 max-h-96 overflow-y-auto pr-2">
454-
<!-- Hidden tag rows (overflow from visible tags) -->
455-
<div v-for="row in hiddenTagRows" :key="row.id" class="py-1">
456-
<div class="flex items-center justify-between gap-2">
457-
<NuxtLink
458-
:to="versionRoute(row.primaryVersion.version)"
459-
class="font-mono text-xs transition-colors duration-200 truncate"
460-
:class="
461-
row.primaryVersion.deprecated
462-
? 'text-red-400 hover:text-red-300'
463-
: 'text-fg-muted hover:text-fg'
464-
"
465-
:title="
466-
row.primaryVersion.deprecated
467-
? `${row.primaryVersion.version} (deprecated)`
468-
: row.primaryVersion.version
469-
"
470-
>
471-
{{ row.primaryVersion.version }}
472-
</NuxtLink>
473-
<div class="flex items-center gap-2 shrink-0">
474-
<NuxtTime
475-
v-if="row.primaryVersion.time"
476-
:datetime="row.primaryVersion.time"
477-
class="text-[10px] text-fg-subtle"
478-
year="numeric"
479-
month="short"
480-
day="numeric"
481-
/>
482-
</div>
483-
</div>
484-
<div v-if="row.tags.length" class="flex items-center gap-1 mt-0.5 flex-wrap">
485-
<span
486-
v-for="tag in row.tags"
487-
:key="tag"
488-
class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[120px]"
489-
:title="tag"
490-
>
491-
{{ tag }}
492-
</span>
452+
<div v-if="otherVersionsExpanded" class="ml-4 pl-2 border-l border-border space-y-0.5">
453+
<!-- Hidden tag rows (overflow from visible tags) -->
454+
<div v-for="row in hiddenTagRows" :key="row.id" class="py-1">
455+
<div class="flex items-center justify-between gap-2">
456+
<NuxtLink
457+
:to="versionRoute(row.primaryVersion.version)"
458+
class="font-mono text-xs transition-colors duration-200 truncate"
459+
:class="
460+
row.primaryVersion.deprecated
461+
? 'text-red-400 hover:text-red-300'
462+
: 'text-fg-muted hover:text-fg'
463+
"
464+
:title="
465+
row.primaryVersion.deprecated
466+
? `${row.primaryVersion.version} (deprecated)`
467+
: row.primaryVersion.version
468+
"
469+
>
470+
{{ row.primaryVersion.version }}
471+
</NuxtLink>
472+
<div class="flex items-center gap-2 shrink-0">
473+
<NuxtTime
474+
v-if="row.primaryVersion.time"
475+
:datetime="row.primaryVersion.time"
476+
class="text-[10px] text-fg-subtle"
477+
year="numeric"
478+
month="short"
479+
day="numeric"
480+
/>
493481
</div>
494482
</div>
483+
<div v-if="row.tags.length" class="flex items-center gap-1 mt-0.5 flex-wrap">
484+
<span
485+
v-for="tag in row.tags"
486+
:key="tag"
487+
class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[120px]"
488+
:title="tag"
489+
>
490+
{{ tag }}
491+
</span>
492+
</div>
493+
</div>
495494

496-
<!-- Major version groups (untagged versions) -->
497-
<template v-if="otherMajorGroups.length > 0">
498-
<div v-for="(group, groupIndex) in otherMajorGroups" :key="group.major">
499-
<!-- Major group header -->
500-
<button
501-
v-if="group.versions.length > 1"
502-
type="button"
503-
class="w-full text-left py-1"
504-
:aria-expanded="group.expanded"
505-
:title="group.versions[0]?.version"
506-
@click="toggleMajorGroup(groupIndex)"
495+
<!-- Major version groups (untagged versions) -->
496+
<template v-if="otherMajorGroups.length > 0">
497+
<div v-for="(group, groupIndex) in otherMajorGroups" :key="group.major">
498+
<!-- Major group header -->
499+
<button
500+
v-if="group.versions.length > 1"
501+
type="button"
502+
class="w-full text-left py-1"
503+
:aria-expanded="group.expanded"
504+
:title="group.versions[0]?.version"
505+
@click="toggleMajorGroup(groupIndex)"
506+
>
507+
<div class="flex items-center gap-2">
508+
<span
509+
class="w-3 h-3 transition-transform duration-200 text-fg-subtle"
510+
:class="group.expanded ? 'i-carbon-chevron-down' : 'i-carbon-chevron-right'"
511+
/>
512+
<span
513+
class="font-mono text-xs truncate"
514+
:class="group.versions[0]?.deprecated ? 'text-red-400' : 'text-fg-muted'"
515+
>
516+
{{ group.versions[0]?.version }}
517+
</span>
518+
</div>
519+
<div
520+
v-if="group.versions[0]?.tags?.length"
521+
class="flex items-center gap-1 ml-5 flex-wrap"
507522
>
508-
<div class="flex items-center gap-2">
509-
<span
510-
class="w-3 h-3 transition-transform duration-200 text-fg-subtle"
511-
:class="group.expanded ? 'i-carbon-chevron-down' : 'i-carbon-chevron-right'"
512-
/>
513-
<span
514-
class="font-mono text-xs truncate"
515-
:class="group.versions[0]?.deprecated ? 'text-red-400' : 'text-fg-muted'"
516-
>
517-
{{ group.versions[0]?.version }}
518-
</span>
519-
</div>
520-
<div
521-
v-if="group.versions[0]?.tags?.length"
522-
class="flex items-center gap-1 ml-5 flex-wrap"
523+
<span
524+
v-for="tag in group.versions[0].tags"
525+
:key="tag"
526+
class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[120px]"
527+
:title="tag"
523528
>
524-
<span
525-
v-for="tag in group.versions[0].tags"
526-
:key="tag"
527-
class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[120px]"
528-
:title="tag"
529-
>
530-
{{ tag }}
531-
</span>
532-
</div>
533-
</button>
534-
<!-- Single version (no expand needed) -->
535-
<div v-else class="py-1">
536-
<div class="flex items-center gap-2">
537-
<span class="w-3" />
529+
{{ tag }}
530+
</span>
531+
</div>
532+
</button>
533+
<!-- Single version (no expand needed) -->
534+
<div v-else class="py-1">
535+
<div class="flex items-center gap-2">
536+
<span class="w-3" />
537+
<NuxtLink
538+
v-if="group.versions[0]"
539+
:to="versionRoute(group.versions[0].version)"
540+
class="font-mono text-xs transition-colors duration-200 truncate"
541+
:class="
542+
group.versions[0].deprecated
543+
? 'text-red-400 hover:text-red-300'
544+
: 'text-fg-muted hover:text-fg'
545+
"
546+
:title="
547+
group.versions[0].deprecated
548+
? `${group.versions[0].version} (deprecated)`
549+
: group.versions[0].version
550+
"
551+
>
552+
{{ group.versions[0].version }}
553+
</NuxtLink>
554+
</div>
555+
<div v-if="group.versions[0]?.tags?.length" class="flex items-center gap-1 ml-5">
556+
<span
557+
v-for="tag in group.versions[0].tags"
558+
:key="tag"
559+
class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide"
560+
>
561+
{{ tag }}
562+
</span>
563+
</div>
564+
</div>
565+
566+
<!-- Major group versions -->
567+
<div v-if="group.expanded && group.versions.length > 1" class="ml-5 space-y-0.5">
568+
<div v-for="v in group.versions.slice(1)" :key="v.version" class="py-1">
569+
<div class="flex items-center justify-between gap-2">
538570
<NuxtLink
539-
v-if="group.versions[0]"
540-
:to="versionRoute(group.versions[0].version)"
571+
:to="versionRoute(v.version)"
541572
class="font-mono text-xs transition-colors duration-200 truncate"
542573
:class="
543-
group.versions[0].deprecated
574+
v.deprecated
544575
? 'text-red-400 hover:text-red-300'
545-
: 'text-fg-muted hover:text-fg'
546-
"
547-
:title="
548-
group.versions[0].deprecated
549-
? `${group.versions[0].version} (deprecated)`
550-
: group.versions[0].version
576+
: 'text-fg-subtle hover:text-fg-muted'
551577
"
578+
:title="v.deprecated ? `${v.version} (deprecated)` : v.version"
552579
>
553-
{{ group.versions[0].version }}
580+
{{ v.version }}
554581
</NuxtLink>
582+
<div class="flex items-center gap-2 shrink-0">
583+
<NuxtTime
584+
v-if="v.time"
585+
:datetime="v.time"
586+
class="text-[10px] text-fg-subtle"
587+
year="numeric"
588+
month="short"
589+
day="numeric"
590+
/>
591+
<ProvenanceBadge
592+
v-if="v.hasProvenance"
593+
:package-name="packageName"
594+
:version="v.version"
595+
compact
596+
/>
597+
</div>
555598
</div>
556-
<div v-if="group.versions[0]?.tags?.length" class="flex items-center gap-1 ml-5">
599+
<div v-if="v.tags?.length" class="flex items-center gap-1 mt-0.5">
557600
<span
558-
v-for="tag in group.versions[0].tags"
601+
v-for="tag in v.tags"
559602
:key="tag"
560603
class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide"
561604
>
562605
{{ tag }}
563606
</span>
564607
</div>
565608
</div>
566-
567-
<!-- Major group versions -->
568-
<div v-if="group.expanded && group.versions.length > 1" class="ml-5 space-y-0.5">
569-
<div v-for="v in group.versions.slice(1)" :key="v.version" class="py-1">
570-
<div class="flex items-center justify-between gap-2">
571-
<NuxtLink
572-
:to="versionRoute(v.version)"
573-
class="font-mono text-xs transition-colors duration-200 truncate"
574-
:class="
575-
v.deprecated
576-
? 'text-red-400 hover:text-red-300'
577-
: 'text-fg-subtle hover:text-fg-muted'
578-
"
579-
:title="v.deprecated ? `${v.version} (deprecated)` : v.version"
580-
>
581-
{{ v.version }}
582-
</NuxtLink>
583-
<div class="flex items-center gap-2 shrink-0">
584-
<NuxtTime
585-
v-if="v.time"
586-
:datetime="v.time"
587-
class="text-[10px] text-fg-subtle"
588-
year="numeric"
589-
month="short"
590-
day="numeric"
591-
/>
592-
<ProvenanceBadge
593-
v-if="v.hasProvenance"
594-
:package-name="packageName"
595-
:version="v.version"
596-
compact
597-
/>
598-
</div>
599-
</div>
600-
<div v-if="v.tags?.length" class="flex items-center gap-1 mt-0.5">
601-
<span
602-
v-for="tag in v.tags"
603-
:key="tag"
604-
class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide"
605-
>
606-
{{ tag }}
607-
</span>
608-
</div>
609-
</div>
610-
</div>
611609
</div>
612-
</template>
613-
<div
614-
v-else-if="hasLoadedAll && hiddenTagRows.length === 0"
615-
class="py-1 text-xs text-fg-subtle"
616-
>
617-
All versions are covered by tags above
618610
</div>
611+
</template>
612+
<div
613+
v-else-if="hasLoadedAll && hiddenTagRows.length === 0"
614+
class="py-1 text-xs text-fg-subtle"
615+
>
616+
All versions are covered by tags above
619617
</div>
620618
</div>
621619
</div>

0 commit comments

Comments
 (0)