Skip to content

fix(ui): adjust sidebar versions spacing #1641

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alexdln merged 4 commits into from
Feb 25, 2026
Merged

fix(ui): adjust sidebar versions spacing #1641

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
44747bc
fix(ui): adjust sidebar versions spacing
MatteoGabriele Feb 25, 2026
344f34d
feat: adjust alignment of input and icons
MatteoGabriele Feb 25, 2026
05492d5
refactor: increase clickable area of chevron
MatteoGabriele Feb 25, 2026
0038a71
fix: increase semver filter tooltip size
alexdln Feb 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/components/CollapsibleSection.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ useHead({
<button
:id="buttonId"
type="button"
class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg-muted transition-colors duration-200 shrink-0 focus-visible:outline-accent/70 rounded"
class="size-5 -me-1 flex items-center justify-center text-fg-subtle hover:text-fg-muted transition-colors duration-200 shrink-0 focus-visible:outline-accent/70 rounded"
Comment thread
alexdln marked this conversation as resolved.
:aria-expanded="isOpen"
:aria-controls="contentId"
:aria-label="ariaLabel"
Expand Down
14 changes: 7 additions & 7 deletions app/components/Package/Versions.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -510,8 +510,8 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b
</template>
<div class="space-y-0.5 min-w-0">
<!-- Semver range filter -->
<div class="px-1 pb-1">
<div class="flex items-center gap-1.5 py-1">
<div>
<div class="flex items-center gap-2 p-1">
<InputBase
v-model="semverFilter"
type="text"
Expand All @@ -527,7 +527,7 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b
<TooltipApp interactive position="top">
<span
tabindex="0"
class="i-lucide:info w-3.5 h-3.5 text-fg-subtle cursor-help shrink-0 rounded-sm"
class="i-lucide:info w-3.5 h-3.5 me-1 text-fg-subtle cursor-help shrink-0 rounded-sm"
role="img"
:aria-label="$t('package.versions.filter_help')"
/>
Expand Down Expand Up @@ -574,7 +574,7 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b
<button
v-if="getTagVersions(row.tag).length > 1 || !hasLoadedAll"
type="button"
class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors rounded-sm"
class="size-5 -me-1 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors rounded-sm"
:aria-expanded="expandedTags.has(row.tag)"
:aria-label="
expandedTags.has(row.tag)
Expand All @@ -592,14 +592,14 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b
/>
<span
v-else
class="w-3 h-3 transition-transform duration-200 rtl-flip"
class="size-3 transition-transform duration-200 rtl-flip"
:class="
expandedTags.has(row.tag) ? 'i-lucide:chevron-down' : 'i-lucide:chevron-right'
"
aria-hidden="true"
/>
</button>
<span v-else class="w-4" />
<span v-else class="w-5" />

<!-- Version info -->
<div class="flex-1 py-1.5 min-w-0 flex gap-2 justify-between items-center">
Expand Down Expand Up @@ -739,7 +739,7 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b
@click="expandOtherVersions"
>
<span
class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors"
class="size-5 -me-1 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors"
>
<span
v-if="otherVersionsLoading"
Expand Down
Loading