fix: align sidebar items consistently (#1857)

Author: bluwy

app/components/CollapsibleSection.vue

@@ -80,7 +80,7 @@ useHead({
 
 <template>
   <section :id="id" :data-anchor-id="id" class="scroll-mt-20 xl:scroll-mt-0">
-    <div class="flex items-center justify-between mb-3 px-1">
+    <div class="flex items-center justify-between mb-3 ps-1">
       <component
         :is="headingLevel"
         class="group text-xs text-fg-subtle uppercase tracking-wider flex gap-2"
@@ -122,7 +122,7 @@ useHead({
 
     <div
       :id="contentId"
-      class="grid ms-6 grid-rows-[1fr] transition-[grid-template-rows] duration-200 ease-in-out collapsible-content"
+      class="grid ms-6 ps-1 grid-rows-[1fr] transition-[grid-template-rows] duration-200 ease-in-out collapsible-content"
       :inert="!isOpen"
     >
       <div class="min-h-0 min-w-0">

app/components/Package/Dependencies.vue

@@ -108,7 +108,7 @@ const numberFormatter = useNumberFormatter()
         )
       "
     >
-      <ul class="px-1 space-y-1 list-none m-0" :aria-label="$t('package.dependencies.list_label')">
+      <ul class="space-y-1 list-none m-0" :aria-label="$t('package.dependencies.list_label')">
         <li
           v-for="[dep, version] in sortedDependencies.slice(0, depsExpanded ? undefined : 10)"
           :key="dep"

app/components/Package/Keywords.vue

@@ -7,7 +7,7 @@ const { model } = useGlobalSearch()
 </script>
 <template>
   <CollapsibleSection v-if="keywords?.length" :title="$t('package.keywords_title')" id="keywords">
-    <ul class="flex flex-wrap gap-1.5 list-none m-0 p-1">
+    <ul class="flex flex-wrap gap-1.5 list-none m-0 p-0">
       <li v-for="keyword in keywords.slice(0, 15)" :key="keyword">
         <LinkBase
           variant="button-secondary"

app/components/Package/Maintainers.vue

@@ -173,10 +173,7 @@ watch(
     id="maintainers"
     :title="$t('package.maintainers.title')"
   >
-    <ul
-      class="space-y-2 list-none m-0 p-0 my-1 px-1"
-      :aria-label="$t('package.maintainers.list_label')"
-    >
+    <ul class="space-y-2 list-none m-0 p-0" :aria-label="$t('package.maintainers.list_label')">
       <li
         v-for="maintainer in visibleMaintainers"
         :key="maintainer.name ?? maintainer.email"

app/components/Package/Versions.vue

@@ -515,7 +515,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 p-1">
+        <div class="flex items-center gap-2 pb-1 pe-1">
           <InputBase
             v-model="semverFilter"
             type="text"

app/components/Package/WeeklyDownloadStats.vue

@@ -240,7 +240,7 @@ const config = computed<VueUiSparklineConfig>(() => {
         opacity: 10,
       },
       dataLabel: {
-        offsetX: -10,
+        offsetX: -12,
         fontSize: 28,
         bold: false,
         color: colors.value.fg,
@@ -274,6 +274,12 @@ const config = computed<VueUiSparklineConfig>(() => {
         strokeDasharray: 0,
         color: isDarkMode.value ? 'oklch(0.985 0 0)' : colors.value.fgSubtle,
       },
+      padding: {
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+      },
     },
   }
 })