fix: shorten the search placeholder on phones

The full placeholder was cut off on narrow screens, e.g. "Search 529 projects across 74".

Co-Authored-By: Claude <noreply@anthropic.com>

website/static/main.js

@@ -12,6 +12,10 @@ const defaultSort =
     : { col: "downloads", order: "desc" };
 let activeSort = defaultSort;
 const searchInput = document.querySelector(".search");
+// The full placeholder is cut off on phones
+if (searchInput && window.matchMedia("(max-width: 680px)").matches) {
+  searchInput.placeholder = searchInput.dataset.shortPlaceholder;
+}
 const noResults = document.querySelector(".no-results");
 const rows = document.querySelectorAll(".table tbody tr.row");
 const tbody = document.querySelector(".table tbody");

website/templates/category.html

@@ -250,6 +250,7 @@
         type="search"
         class="search"
         placeholder="Search {{ entries | length }} projects in {{ category.name }}..."
+        data-short-placeholder="Search {{ entries | length }} projects..."
         aria-label="Search projects"
       />
     </div>

website/templates/index.html

@@ -112,6 +112,7 @@
         type="search"
         class="search"
         placeholder="Search {{ entries | length }} projects across {{ total_categories }} categories..."
+        data-short-placeholder="Search {{ entries | length }} projects..."
         aria-label="Search projects"
       />
     </div>