Improve mobile responsiveness, explain scoring, simple search.

web/src/views/Repository.vue

@@ -15,6 +15,20 @@ const route = useRoute()
 const repository = ref(null)
 const loading = ref(true)
 const error = ref(null)
+const searchQuery = ref('')
+
+const allContributors = computed(() => repository.value?.contributors || [])
+
+const filteredContributors = computed(() => {
+  if (!searchQuery.value.trim()) return allContributors.value
+
+  const query = searchQuery.value.toLowerCase().trim()
+  return allContributors.value.filter(contributor => {
+    const name = (contributor.name || '').toLowerCase()
+    const login = (contributor.login || '').toLowerCase()
+    return name.includes(query) || login.includes(query)
+  })
+})
 
 const breadcrumbs = computed(() => [
   { label: 'Dashboard', to: '/' },
@@ -104,11 +118,35 @@ watch(() => route.params, loadRepository)
       <!-- Contributors -->
       <section class="py-8 px-4">
         <div class="container mx-auto">
-          <SectionHeader title="Contributors" icon="fas fa-users" icon-color="text-blue-500" />
+          <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
+            <SectionHeader title="Contributors" icon="fas fa-users" icon-color="text-blue-500" class="mb-0" />
+
+            <!-- Search Input -->
+            <div class="relative w-full sm:w-64">
+              <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
+              <input
+                v-model="searchQuery"
+                type="text"
+                placeholder="Search contributors..."
+                class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition text-sm"
+              />
+              <button
+                v-if="searchQuery"
+                @click="searchQuery = ''"
+                class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
+              >
+                <i class="fas fa-times"></i>
+              </button>
+            </div>
+          </div>
+
+          <p v-if="searchQuery && filteredContributors.length !== allContributors.length" class="mb-4 text-sm text-gray-500 dark:text-gray-400">
+            Showing {{ filteredContributors.length }} of {{ allContributors.length }} contributors
+          </p>
 
           <DataTable
             :columns="tableColumns"
-            :items="repository.contributors"
+            :items="filteredContributors"
             empty-icon="fas fa-users"
             empty-message="No contributors found"
             row-class="hover:bg-gray-50 dark:hover:bg-gray-800/30 transition group"