From fb51af056392f62ca3fc0ae042889e1edd3c11c5 Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Sat, 21 Mar 2026 12:05:36 +0100
Subject: [PATCH 1/3] fix(ui): skeleton design not aligned between states

---
 app/components/Package/Skeleton.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Package/Skeleton.vue b/app/components/Package/Skeleton.vue
index 2feaf41eb5..071dd4c7d4 100644
--- a/app/components/Package/Skeleton.vue
+++ b/app/components/Package/Skeleton.vue
@@ -176,7 +176,7 @@
     <!-- Sidebar — matches area-sidebar in [...name].vue -->
     <div class="area-sidebar">
       <div
-        class="sticky top-30 xl:top-14 space-y-6 sm:space-y-8 min-w-0 overflow-y-auto pe-2.5 lg:(max-h-[calc(100dvh-8.5rem)] overscroll-contain) xl:(max-h-[calc(100dvh-6rem)])"
+        class="space-y-6 sm:space-y-8 min-w-0 pe-2.5 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">
           <!-- Download stats — matches CollapsibleSection + sparkline skeleton -->

From 254462dda719010fc4876874762921f76e7967f2 Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Sat, 21 Mar 2026 14:02:08 +0100
Subject: [PATCH 2/3] feat: remove extra padding

---
 app/components/Package/Skeleton.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Package/Skeleton.vue b/app/components/Package/Skeleton.vue
index 071dd4c7d4..2869c60c8a 100644
--- a/app/components/Package/Skeleton.vue
+++ b/app/components/Package/Skeleton.vue
@@ -176,7 +176,7 @@
     <!-- Sidebar — matches area-sidebar in [...name].vue -->
     <div class="area-sidebar">
       <div
-        class="space-y-6 sm:space-y-8 min-w-0 pe-2.5 lg:(max-h-[calc(100dvh-8.5rem)] overscroll-contain) xl:(max-h-[calc(100dvh-6rem)])"
+        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">
           <!-- Download stats — matches CollapsibleSection + sparkline skeleton -->

From 235de192a7e61ebfb70476eeb14cd24c6b724341 Mon Sep 17 00:00:00 2001
From: MatteoGabriele <m.gabriele.dev@gmail.com>
Date: Sat, 21 Mar 2026 16:03:07 +0100
Subject: [PATCH 3/3] refactor: get as close as possible to loaded state

---
 app/components/Package/Skeleton.vue | 26 ++++++++++++--------------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/app/components/Package/Skeleton.vue b/app/components/Package/Skeleton.vue
index 2869c60c8a..21fe171913 100644
--- a/app/components/Package/Skeleton.vue
+++ b/app/components/Package/Skeleton.vue
@@ -2,24 +2,22 @@
 
 <template>
   <!-- Package header — matches area-header in [...name].vue -->
-  <header class="bg-[--bg] pt-5 pb-1 w-full container">
-    <div class="min-w-0">
-      <!-- Package name -->
-      <div class="min-w-0 flex items-center gap-2 justify-between">
-        <h1 class="font-mono text-2xl sm:text-3xl font-medium">
-          <SkeletonInline class="block! h-9 w-48" />
-        </h1>
-        <div class="flex gap-1">
-          <!-- Compare placeholder -->
-          <SkeletonBlock class="w-9 md:w-40 h-9 rounded self-baseline" />
-          <!-- Likes button placeholder -->
-          <SkeletonBlock class="w-14 h-9 rounded self-baseline" />
-        </div>
+  <header class="bg-bg pt-6 pb-2 pb-1 w-full container">
+    <!-- Package name -->
+    <div class="flex items-baseline justify-between gap-x-2 gap-y-1 flex-wrap min-w-0">
+      <h1 class="font-mono text-2xl sm:text-3xl font-medium">
+        <SkeletonInline class="block! h-9 w-48" />
+      </h1>
+      <div class="flex gap-2 flex-wrap items-stretch">
+        <!-- Compare placeholder -->
+        <SkeletonBlock class="w-9 md:w-36 h-9 rounded" />
+        <!-- Likes button placeholder -->
+        <SkeletonBlock class="w-14 h-9 rounded" />
       </div>
     </div>
   </header>
 
-  <div class="sticky top-14 z-1 pt-3 bg-bg border-b border-border w-full">
+  <div class="w-full bg-bg sticky top-14 z-10 border-b border-border pt-2">
     <div class="w-full container flex flex-col md:flex-row-reverse flex-wrap gap-2 justify-between">
       <!-- Version -->
       <span class="inline-flex items-baseline font-mono text-base sm:text-lg shrink-0">