feat(web): drop 'newest' sort + width-cap categories on /templates
All checks were successful
Deploy to Production / deploy (push) Successful in 52s
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:
parent
00c6692c7a
commit
9f1135325c
@ -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) => (
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user