From cf804b5f7816c6762fbee4fa2c1587ef6faed304 Mon Sep 17 00:00:00 2001
From: Vinta Chen <vinta.chen@gmail.com>
Date: Wed, 21 Oct 2026 16:36:33 +0800
Subject: [PATCH] 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          | 4 ++++
 website/templates/category.html | 1 +
 website/templates/index.html    | 1 +
 3 files changed, 6 insertions(+)

diff --git a/website/static/main.js b/website/static/main.js
index 8ca095ba..aa027eab 100644
--- a/website/static/main.js
+++ b/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");
diff --git a/website/templates/category.html b/website/templates/category.html
index e27e5f90..89d4367c 100644
--- a/website/templates/category.html
+++ b/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>
diff --git a/website/templates/index.html b/website/templates/index.html
index 6020f35b..c4e18fba 100644
--- a/website/templates/index.html
+++ b/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>