fix: add back button and centre icon on compare page (#941)

Co-authored-by: Daniel Roe <daniel@roe.dev>

Author: RYGRIT

app/components/Compare/FacetCard.vue

@@ -75,12 +75,13 @@ function getShortName(header: string): string {
     <!-- Facet header -->
     <div class="flex items-center gap-1.5 px-3 py-2 bg-bg-subtle border-b border-border">
       <span class="text-xs text-fg-muted uppercase tracking-wider font-medium">{{ label }}</span>
-      <span
-        v-if="description"
-        class="i-carbon:information w-3 h-3 text-fg-subtle"
-        :title="description"
-        aria-hidden="true"
-      />
+      <TooltipApp v-if="description" :text="description" position="top">
+        <span
+          class="i-carbon:information w-3 h-3 text-fg-subtle"
+          :title="description"
+          aria-hidden="true"
+        />
+      </TooltipApp>
     </div>
 
     <!-- Package values -->

app/components/Compare/PackageSelector.vue

@@ -75,7 +75,7 @@ function handleBlur() {
           :aria-label="$t('compare.selector.remove_package', { package: pkg })"
           @click="removePackage(pkg)"
         >
-          <span class="i-carbon:close w-3.5 h-3.5" aria-hidden="true" />
+          <span class="i-carbon:close flex items-center w-3.5 h-3.5" aria-hidden="true" />
         </button>
       </div>
     </div>

app/pages/compare.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { useRouteQuery } from '@vueuse/router'
 
-const router = useRouter()
-
 definePageMeta({
   name: 'compare',
 })
 
+const router = useRouter()
+
 // Sync packages with URL query param (stable ref - doesn't change on other query changes)
 const packagesParam = useRouteQuery<string>('packages', '', { mode: 'replace' })
 
@@ -182,7 +182,10 @@ useSeoMeta({
       </section>
 
       <!-- Empty state -->
-      <section v-else class="text-center py-16 border border-dashed border-border rounded-lg">
+      <section
+        v-else
+        class="text-center px-1.5 py-16 border border-dashed border-border rounded-lg"
+      >
         <div class="i-carbon:compare w-12 h-12 text-fg-subtle mx-auto mb-4" aria-hidden="true" />
         <h2 class="font-mono text-lg text-fg-muted mb-2">
           {{ $t('compare.packages.empty_title') }}