From 44747bcd040ff75cbbe224516d2ae92bf5602841 Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Wed, 25 Feb 2026 10:50:51 +0100
Subject: [PATCH 1/4] fix(ui): adjust sidebar versions spacing

---
 app/components/Package/Versions.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue
index 96ab7b10d..c31c29c86 100644
--- a/app/components/Package/Versions.vue
+++ b/app/components/Package/Versions.vue
@@ -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 py-1">
           <InputBase
             v-model="semverFilter"
             type="text"
@@ -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-2 text-fg-subtle cursor-help shrink-0 rounded-sm"
               role="img"
               :aria-label="$t('package.versions.filter_help')"
             />

From 344f34d22fec4a5801cc28643a56467b5f49ccba Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Wed, 25 Feb 2026 12:15:46 +0100
Subject: [PATCH 2/4] feat: adjust alignment of input and icons

---
 app/components/Package/Versions.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue
index c31c29c86..48fac87e7 100644
--- a/app/components/Package/Versions.vue
+++ b/app/components/Package/Versions.vue
@@ -511,7 +511,7 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b
     <div class="space-y-0.5 min-w-0">
       <!-- Semver range filter -->
       <div>
-        <div class="flex items-center gap-2 py-1">
+        <div class="flex items-center gap-2 p-1">
           <InputBase
             v-model="semverFilter"
             type="text"
@@ -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 me-2 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')"
             />

From 05492d5bf9c1f0e418cbcd2201bac78cd862b12b Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Wed, 25 Feb 2026 15:23:50 +0100
Subject: [PATCH 3/4] refactor: increase clickable area of chevron

---
 app/components/CollapsibleSection.vue | 2 +-
 app/components/Package/Versions.vue   | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/components/CollapsibleSection.vue b/app/components/CollapsibleSection.vue
index 35faa43b1..48f9d5329 100644
--- a/app/components/CollapsibleSection.vue
+++ b/app/components/CollapsibleSection.vue
@@ -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"
           :aria-expanded="isOpen"
           :aria-controls="contentId"
           :aria-label="ariaLabel"
diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue
index 48fac87e7..db5f96282 100644
--- a/app/components/Package/Versions.vue
+++ b/app/components/Package/Versions.vue
@@ -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)
@@ -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">
@@ -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"

From 0038a71da90af0b66380b07a7bee27fea9de8521 Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Wed, 25 Feb 2026 15:23:47 +0000
Subject: [PATCH 4/4] fix: increase semver filter tooltip size

---
 app/components/Package/Versions.vue | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue
index db5f96282..7e70f7d2e 100644
--- a/app/components/Package/Versions.vue
+++ b/app/components/Package/Versions.vue
@@ -527,10 +527,14 @@ 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 me-1 text-fg-subtle cursor-help shrink-0 rounded-sm"
-              role="img"
-              :aria-label="$t('package.versions.filter_help')"
-            />
+              class="block cursor-help shrink-0 -m-2 p-2 -me-1 focus-visible:outline-2 focus-visible:outline-accent/70 rounded"
+            >
+              <span
+                class="block i-lucide:info w-3.5 h-3.5 text-fg-subtle"
+                role="img"
+                :aria-label="$t('package.versions.filter_help')"
+              />
+            </span>
             <template #content>
               <p class="text-xs text-fg-muted">
                 <i18n-t keypath="package.versions.filter_tooltip" tag="span">