From af36e471fa3da56abd23b568bfa3e925afb830a8 Mon Sep 17 00:00:00 2001
From: "Mr. Robot" <gomexxxx71@gmail.com>
Date: Mon, 26 Jan 2026 15:14:32 +0600
Subject: [PATCH] chore: improve package card component for mobile version

---
 app/components/PackageCard.vue | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/app/components/PackageCard.vue b/app/components/PackageCard.vue
index 6b34240550..ecc6fdce78 100644
--- a/app/components/PackageCard.vue
+++ b/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"