fix: improve package card component on mobile (#110)

Author: iiio2

app/components/PackageCard.vue

@@ -31,17 +31,17 @@ const emit = defineEmits<{
       @focus="index != null && emit('focus', index)"
       @mouseenter="index != null && emit('focus', index)"
     >
-      <header class="flex items-start justify-between gap-4 mb-2">
+      <header class="flex items-start justify-between gap-2 sm:gap-4 mb-2">
         <component
           :is="headingLevel ?? 'h3'"
-          class="font-mono text-base font-medium text-fg group-hover:text-fg transition-colors duration-200 min-w-0 break-all"
+          class="font-mono text-sm sm:text-base font-medium text-fg group-hover:text-fg transition-colors duration-200 min-w-0 break-words"
         >
           {{ result.package.name }}
         </component>
-        <div class="flex items-center gap-1.5 shrink-0 max-w-32">
+        <div class="flex items-center gap-1.5 shrink-0">
           <span
             v-if="result.package.version"
-            class="font-mono text-xs text-fg-subtle truncate"
+            class="font-mono text-xs text-fg-subtle truncate max-w-20 sm:max-w-32"
             :title="result.package.version"
           >
             v{{ result.package.version }}
@@ -56,11 +56,14 @@ const emit = defineEmits<{
         </div>
       </header>
 
-      <p v-if="result.package.description" class="text-fg-muted text-sm line-clamp-2 mb-3">
+      <p
+        v-if="result.package.description"
+        class="text-fg-muted text-xs sm:text-sm line-clamp-2 mb-2 sm:mb-3"
+      >
         <MarkdownText :text="result.package.description" />
       </p>
 
-      <footer class="flex flex-wrap items-center gap-x-4 gap-y-2 text-xs text-fg-subtle">
+      <footer class="flex flex-wrap items-center gap-x-3 sm:gap-x-4 gap-y-2 text-xs text-fg-subtle">
         <dl v-if="showPublisher || result.package.date" class="flex items-center gap-4 m-0">
           <div
             v-if="showPublisher && result.package.publisher?.username"