fix: improve packages UI (#2530)

Co-authored-by: Abhiram S <120167005+4bh1zd@users.noreply.github.com>

Author: abhi123vj

app/components/Code/DirectoryListing.vue

@@ -74,7 +74,7 @@ const bytesFormatter = useBytesFormatter()
         <!-- Parent directory link -->
         <tr
           v-if="parentPath !== null"
-          class="border-b border-border hover:bg-bg-subtle transition-colors"
+          class="border-b border-border hover:bg-bg-subtle transition-[color,background-color] duration-100"
         >
           <td colspan="2">
             <LinkBase
@@ -98,7 +98,7 @@ const bytesFormatter = useBytesFormatter()
         <tr
           v-for="node in currentContents"
           :key="node.path"
-          class="border-b border-border hover:bg-bg-subtle transition-colors"
+          class="border-b border-border hover:bg-bg-subtle transition-[color,background-color] duration-100"
         >
           <td colspan="2">
             <LinkBase

app/components/Code/FileTree.vue

@@ -53,7 +53,7 @@ watch(
       <!-- Directory -->
       <template v-if="node.type === 'directory'">
         <ButtonBase
-          class="w-full justify-start! rounded-none! border-none!"
+          class="w-full justify-start! rounded-none! border-none! transition-[color,background-color]! duration-100!"
           block
           :aria-pressed="isNodeActive(node)"
           :style="{ paddingLeft: `${depth * 12 + 12}px` }"
@@ -88,7 +88,7 @@ watch(
           variant="button-secondary"
           :to="getFileRoute(node.path)"
           :aria-current="currentPath === node.path"
-          class="w-full justify-start! rounded-none! border-none!"
+          class="w-full justify-start! rounded-none! border-none! transition-[color,background-color]! duration-100!"
           block
           :style="{ paddingLeft: `${depth * 12 + 32}px` }"
         >

app/components/Code/Header.vue

@@ -254,7 +254,7 @@ useEventListener('keydown', (event: KeyboardEvent) => {
           <ButtonBase
             class="px-3 max-xl:hidden"
             :disabled="loading"
-            classicon="i-lucide:unfold-horizontal [.container-full>&]:i-lucide:fold-horizontal"
+            classicon="i-lucide:unfold-horizontal [.container-full_&]:i-lucide:fold-horizontal"
             :aria-label="$t('code.toggle_container')"
             @click="toggleCodeContainer()"
           />

app/components/Package/Versions.vue

@@ -569,10 +569,10 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b
           <TooltipApp interactive position="top">
             <span
               tabindex="0"
-              class="block cursor-help shrink-0 -m-2 p-2 -me-1 focus-visible:outline-2 focus-visible:outline-accent/70 rounded"
+              class="group/tooltip 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"
+                class="block i-lucide:info w-3.5 h-3.5 text-fg-subtle transition-colors group-hover/tooltip:text-fg"
                 role="img"
                 :aria-label="$t('package.versions.filter_help')"
               />
@@ -783,7 +783,7 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b
       <div class="p-1">
         <button
           type="button"
-          class="flex items-center gap-2 text-start rounded-sm w-full"
+          class="group/version-row flex items-center gap-2 text-start rounded-sm w-full"
           :class="otherVersionsContainsCurrent() ? 'bg-bg-subtle' : ''"
           :aria-expanded="otherVersionsExpanded"
           :aria-label="
@@ -809,7 +809,9 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b
               aria-hidden="true"
             />
           </span>
-          <span class="text-xs text-fg-muted py-1.5">
+          <span
+            class="text-xs text-fg-muted py-1.5 group-hover/version-row:text-fg transition-colors"
+          >
             {{ $t('package.versions.other_versions') }}
             <span v-if="hiddenTagRows.length > 0" class="text-fg-subtle">
               ({{

app/pages/package/[[org]]/[name].vue

@@ -679,7 +679,7 @@ const showSkeleton = shallowRef(false)
                 <TooltipApp v-if="sizeTooltip" :text="sizeTooltip" interactive>
                   <span
                     tabindex="0"
-                    class="inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1 text-fg-subtle cursor-help focus-visible:outline-2 focus-visible:outline-accent/70 rounded"
+                    class="inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1 text-fg-subtle hover:text-fg transition-colors cursor-help focus-visible:outline-2 focus-visible:outline-accent/70 rounded"
                   >
                     <span class="i-lucide:info w-3 h-3" aria-hidden="true" />
                   </span>
@@ -937,7 +937,7 @@ const showSkeleton = shallowRef(false)
         </div>
 
         <PackageSidebar :class="$style.areaSidebar">
-          <div class="flex flex-col gap-4 sm:gap-6 xl:pt-4">
+          <div class="flex flex-col gap-4 sm:gap-6 lg:pt-4">
             <!-- Team access controls (for scoped packages when connected) -->
             <ClientOnly>
               <PackageAccessControls :package-name="pkg.name" />