feat: add search to Help Center admin pages (#14772)

app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue

@@ -210,9 +210,9 @@ const handleClick = id => {
         </div>
       </div>
     </div>
-    <div class="flex items-center justify-between w-full gap-4">
-      <div class="flex items-center gap-4">
-        <div class="flex items-center gap-1">
+    <div class="flex items-center justify-between w-full gap-2 sm:gap-4">
+      <div class="flex items-center min-w-0 gap-2 sm:gap-4">
+        <div class="flex items-center min-w-0 gap-1">
           <Avatar
             :name="authorName"
             :src="authorThumbnailSrc"
@@ -223,19 +223,17 @@ const handleClick = id => {
             {{ authorName || '-' }}
           </span>
         </div>
-        <span
-          class="flex items-center gap-1 text-sm whitespace-nowrap text-n-slate-11"
-        >
+        <span class="flex items-center min-w-0 gap-1 text-sm text-n-slate-11">
           <EmojiIcon
             v-if="category?.icon"
             :value="category.icon"
             :color="category.icon_color"
             class="flex-shrink-0 size-4"
           />
-          {{ categoryName }}
+          <span class="truncate">{{ categoryName }}</span>
         </span>
         <div
-          class="inline-flex items-center gap-1 text-n-slate-11 whitespace-nowrap"
+          class="inline-flex items-center gap-1 text-n-slate-11 whitespace-nowrap shrink-0"
         >
           <Icon icon="i-lucide-eye" class="size-4" />
           <span class="text-sm">
@@ -247,7 +245,7 @@ const handleClick = id => {
           </span>
         </div>
       </div>
-      <span class="text-sm text-n-slate-11 line-clamp-1">
+      <span class="text-sm text-n-slate-11 line-clamp-1 shrink-0">
         {{ lastUpdatedAt }}
       </span>
     </div>