From 9f1135325c102938e8ceab8ffb8adfc914f3df02 Mon Sep 17 00:00:00 2001
From: Marco Sadjadi <marco@buildmymcpserver.local>
Date: Tue, 26 May 2026 19:27:57 +0200
Subject: [PATCH] feat(web): drop 'newest' sort + width-cap categories on
 /templates

Two narrow fixes for mobile chip-row width:
- Removed the 'newest' sort button. Trending and Top cover the use
  cases; newest was largely redundant with Top sorted on createdAt.
- Capped the categories <select> at 140px (160px on sm+). Long
  category names were stretching the box and pushing the
  horizontally-scrollable chip row beyond a sane width on phones.
  Native <select> truncates the visible label with ellipsis; the
  dropdown panel still shows full names when opened.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/web/app/templates/page.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/apps/web/app/templates/page.tsx b/apps/web/app/templates/page.tsx
index 12879cd..754bb94 100644
--- a/apps/web/app/templates/page.tsx
+++ b/apps/web/app/templates/page.tsx
@@ -26,7 +26,7 @@ interface Template {
   createdAt: string;
 }
 
-type Sort = 'trending' | 'top' | 'newest';
+type Sort = 'trending' | 'top';
 type Scope = 'all' | 'mine';
 
 const STATUS_STYLE: Record<Template['status'], string> = {
@@ -202,7 +202,7 @@ export default function TemplatesMarketplace() {
             {scope === 'all' && (
               <>
                 <div className="flex shrink-0 gap-1">
-                  {(['trending', 'top', 'newest'] as Sort[]).map((s) => (
+                  {(['trending', 'top'] as Sort[]).map((s) => (
                     <button
                       key={s}
                       type="button"
@@ -225,7 +225,13 @@ export default function TemplatesMarketplace() {
             <select
               value={category}
               onChange={(e) => setCategory(e.target.value)}
-              className="h-7 shrink-0 rounded-md border border-[--color-border] bg-[--color-bg-subtle] px-2 text-[12.5px] focus:border-[--color-accent] focus:outline-none"
+              // Hard width-cap — without it a long category name in the
+              // selected slot would blow the chip row out on mobile and
+              // push the scrollable region beyond the viewport. Native
+              // <select> truncates the visible label with ellipsis when
+              // the box is narrower than the text; the dropdown panel
+              // itself still shows full names when opened.
+              className="h-7 w-[140px] shrink-0 truncate rounded-md border border-[--color-border] bg-[--color-bg-subtle] px-2 text-[12.5px] focus:border-[--color-accent] focus:outline-none sm:w-[160px]"
             >
               <option value="">All categories</option>
               {categories.map((c) => (