fix: improve packages and code tab UI

- Fix sidebar position on tablet (xl:pt-4 → lg:pt-4) including skeleton
- Add hover color transition to tooltip info icon
- Add hover color transition to "other versions" dropdown button
- Decrease directory listing transition to 100ms, scope to color and
  background-color only
- Fix container-width toggle icon selector syntax

Closes #2516

Author: Ai-chan-0411

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/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/Skeleton.vue

@@ -181,7 +181,7 @@
       <div
         class="space-y-6 sm:space-y-8 min-w-0 lg:(max-h-[calc(100dvh-8.5rem)] overscroll-contain) xl:(max-h-[calc(100dvh-6rem)])"
       >
-        <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">
           <!-- Download stats — matches CollapsibleSection + sparkline skeleton -->
           <section>
             <div class="flex items-center justify-between mb-3 px-1">

app/components/Package/Versions.vue

@@ -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="flex items-center gap-2 text-start rounded-sm w-full hover:text-fg transition-colors"
           :class="otherVersionsContainsCurrent() ? 'bg-bg-subtle' : ''"
           :aria-expanded="otherVersionsExpanded"
           :aria-label="

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

@@ -671,7 +671,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>
@@ -925,7 +925,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" />