fix: correct indents (#1842)

Author: alexdln

app/components/Compare/PackageSelector.vue

@@ -266,7 +266,7 @@ onClickOutside(containerRef, () => {
         <div
           v-if="isInputFocused && (navigableItems.length > 0 || isSearching)"
           ref="listRef"
-          class="absolute top-full inset-x-0 mt-1 bg-bg-elevated border border-border rounded-lg shadow-lg z-50 max-h-64 overflow-y-auto"
+          class="absolute top-full inset-x-0 mt-1 px-0.5 bg-bg-elevated border border-border rounded-lg shadow-lg z-50 max-h-64 overflow-y-auto"
         >
           <!-- No dependency option (easter egg with James) -->
           <ButtonBase
@@ -297,7 +297,7 @@ onClickOutside(containerRef, () => {
             v-for="(result, index) in filteredResults"
             :key="result.name"
             data-navigable
-            class="block w-full text-start"
+            class="block w-full text-start my-0.5"
             :class="highlightedIndex === index + resultIndexOffset ? '!bg-accent/15' : ''"
             @mouseenter="highlightedIndex = index + resultIndexOffset"
             @click="addPackage(result.name)"

app/components/Package/ListToolbar.vue

@@ -179,7 +179,7 @@ function getSortKeyLabelKey(key: SortKey): string {
           <button
             v-if="!searchContext || currentSort.key !== 'relevance'"
             type="button"
-            class="p-1.5 rounded border border-border bg-bg-subtle text-fg-muted hover:text-fg hover:border-border-hover transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
+            class="p-2.5 rounded-md border border-border bg-bg-subtle text-fg-muted hover:text-fg hover:border-border-hover transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
             :aria-label="$t('filters.sort.toggle_direction')"
             :title="
               currentSort.direction === 'asc'

app/components/Package/WeeklyDownloadStats.vue

@@ -300,7 +300,7 @@ const config = computed<VueUiSparklineConfig>(() => {
         <span v-else-if="isLoadingWeeklyDownloads" class="min-w-6 min-h-6 -m-1 p-1" />
       </template>
 
-      <div class="w-full overflow-hidden h-[76px] motion-safe:h-[calc(92px+0.75rem)]">
+      <div class="w-full overflow-hidden h-[76px]">
         <template v-if="isLoadingWeeklyDownloads || hasWeeklyDownloads">
           <ClientOnly>
             <VueUiSparkline class="w-full max-w-xs" :dataset :config>

app/components/Terminal/Install.vue

@@ -216,7 +216,7 @@ const copyDevInstallCommand = () =>
             >
             <NuxtLink
               :to="packageRoute(typesPackageName!)"
-              class="text-fg-subtle hover:text-fg-muted text-xs transition-colors focus-visible:outline-accent/70 rounded select-none"
+              class="text-fg-subtle hover:text-fg-muted text-xs transition-colors focus-visible:outline-accent/70 rounded select-none -m-1 p-1"
               :title="$t('package.get_started.view_types', { package: typesPackageName })"
             >
               <span class="i-lucide:arrow-right rtl-flip w-3 h-3 align-middle" aria-hidden="true" />

app/components/ViewModeToggle.vue

@@ -6,13 +6,13 @@ const viewMode = defineModel<ViewMode>({ default: 'cards' })
 
 <template>
   <div
-    class="inline-flex rounded-md border border-border p-0.5 bg-bg-muted"
+    class="flex rounded-md border border-border p-0.5 bg-bg-muted"
     role="group"
     :aria-label="$t('filters.view_mode.label')"
   >
     <button
       type="button"
-      class="inline-flex items-center px-2.5 py-1.5 text-sm font-medium rounded-sm border transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+      class="flex items-center px-2.5 py-2 text-sm font-medium rounded-sm border transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
       :class="
         viewMode === 'cards'
           ? 'bg-bg-subtle text-fg border-fg-subtle'
@@ -22,12 +22,12 @@ const viewMode = defineModel<ViewMode>({ default: 'cards' })
       :aria-label="$t('filters.view_mode.cards')"
       @click="viewMode = 'cards'"
     >
-      <span class="i-lucide:rows-2 w-4 h-4" aria-hidden="true" />
+      <span class="block i-lucide:rows-2 w-4 h-4" aria-hidden="true" />
       <span class="sr-only">{{ $t('filters.view_mode.cards') }}</span>
     </button>
     <button
       type="button"
-      class="inline-flex items-center px-2.5 py-1.5 text-sm font-medium rounded-sm border transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+      class="flex items-center px-2.5 py-2 text-sm font-medium rounded-sm border transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
       :class="
         viewMode === 'table'
           ? 'bg-bg-subtle  text-fg border-fg-subtle'
@@ -37,7 +37,7 @@ const viewMode = defineModel<ViewMode>({ default: 'cards' })
       :aria-label="$t('filters.view_mode.table')"
       @click="viewMode = 'table'"
     >
-      <span class="i-lucide:table w-4 h-4" aria-hidden="true" />
+      <span class="block i-lucide:table w-4 h-4" aria-hidden="true" />
       <span class="sr-only">{{ $t('filters.view_mode.table') }}</span>
     </button>
   </div>

app/pages/accessibility.vue

@@ -27,7 +27,7 @@ const canGoBack = useCanGoBack()
           </h1>
           <button
             type="button"
-            class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded shrink-0"
+            class="cursor-pointer inline-flex items-center gap-2 p-1.5 -mx-1.5 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded shrink-0"
             @click="router.back()"
             v-if="canGoBack"
           >

app/pages/compare.vue

@@ -170,7 +170,7 @@ useSeoMeta({
           </h1>
           <button
             type="button"
-            class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
+            class="cursor-pointer inline-flex items-center gap-2 p-1.5 -mx-1.5 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
             @click="router.back()"
             v-if="canGoBack"
           >

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

@@ -895,6 +895,7 @@ const showSkeleton = shallowRef(false)
               :aria-label="$t('common.scroll_to_top')"
               @click="scrollToTop"
               classicon="i-lucide:arrow-up"
+              class="sm:p-2.75"
             />
           </ButtonGroup>
 

app/pages/privacy.vue

@@ -29,7 +29,7 @@ const { locale } = useI18n()
           </h1>
           <button
             type="button"
-            class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
+            class="cursor-pointer inline-flex items-center gap-2 p-1.5 -mx-1.5 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
             @click="router.back()"
             v-if="canGoBack"
           >

app/pages/recharging.vue

@@ -76,7 +76,7 @@ const icons = [
           </h1>
           <button
             type="button"
-            class="cursor-pointer inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
+            class="cursor-pointer inline-flex items-center gap-2 p-1.5 -mx-1.5 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
             @click="router.back()"
             v-if="canGoBack"
           >