feat(web): drop 'newest' sort + width-cap categories on /templates
All checks were successful
Deploy to Production / deploy (push) Successful in 52s

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>
This commit is contained in:
Marco Sadjadi 2026-05-26 19:27:57 +02:00
parent 00c6692c7a
commit 9f1135325c

View File

@ -26,7 +26,7 @@ interface Template {
createdAt: string; createdAt: string;
} }
type Sort = 'trending' | 'top' | 'newest'; type Sort = 'trending' | 'top';
type Scope = 'all' | 'mine'; type Scope = 'all' | 'mine';
const STATUS_STYLE: Record<Template['status'], string> = { const STATUS_STYLE: Record<Template['status'], string> = {
@ -202,7 +202,7 @@ export default function TemplatesMarketplace() {
{scope === 'all' && ( {scope === 'all' && (
<> <>
<div className="flex shrink-0 gap-1"> <div className="flex shrink-0 gap-1">
{(['trending', 'top', 'newest'] as Sort[]).map((s) => ( {(['trending', 'top'] as Sort[]).map((s) => (
<button <button
key={s} key={s}
type="button" type="button"
@ -225,7 +225,13 @@ export default function TemplatesMarketplace() {
<select <select
value={category} value={category}
onChange={(e) => setCategory(e.target.value)} 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> <option value="">All categories</option>
{categories.map((c) => ( {categories.map((c) => (