diff --git a/apps/web/src/app/showcase-deck.tsx b/apps/web/src/app/showcase-deck.tsx
index 0977ed5..b706fef 100644
--- a/apps/web/src/app/showcase-deck.tsx
+++ b/apps/web/src/app/showcase-deck.tsx
@@ -66,22 +66,36 @@ export function ShowcaseDeck({
           the drag gesture and never has to stay legible on a bright image. */}
       <div className="min-w-0 shrink-0 px-4 pt-[3.25rem]">
         {selected ? (
-          <Chip selected onClick={() => setCategoryId(null)}>
+          <Chip selected size="sm" onClick={() => setCategoryId(null)}>
             {selected.name}
-            <X className="h-4 w-4" aria-hidden />
+            <X className="h-3.5 w-3.5" aria-hidden />
             <span className="sr-only">Show all trades</span>
           </Chip>
         ) : (
-          <div
-            className="-mx-4 flex gap-2 overflow-x-auto px-4 pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
-            role="group"
-            aria-label="Filter by trade"
-          >
+          // The strip scrolls sideways through every trade. The right-hand fade
+          // is the only affordance saying so — the scrollbar is hidden, and a
+          // row that simply ends at the bezel reads as the whole list.
+          <div className="relative -mx-4">
+            <div
+              className="flex gap-1.5 overflow-x-auto px-4 pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+              role="group"
+              aria-label="Filter by trade"
+            >
             {categories.map((c) => (
-              <Chip key={c.id} className="shrink-0" onClick={() => setCategoryId(c.id)}>
+              <Chip
+                key={c.id}
+                size="sm"
+                className="shrink-0"
+                onClick={() => setCategoryId(c.id)}
+              >
                 {c.name}
               </Chip>
-            ))}
+              ))}
+            </div>
+            <div
+              aria-hidden
+              className="pointer-events-none absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-page to-transparent"
+            />
           </div>
         )}
       </div>
diff --git a/apps/web/src/components/ui/chip.tsx b/apps/web/src/components/ui/chip.tsx
index aed9438..c2b50cb 100644
--- a/apps/web/src/components/ui/chip.tsx
+++ b/apps/web/src/components/ui/chip.tsx
@@ -9,18 +9,28 @@ import { cn } from '@/lib/utils';
  */
 export function Chip({
   selected = false,
+  size = 'md',
   className,
   children,
   ...props
-}: React.ButtonHTMLAttributes<HTMLButtonElement> & { selected?: boolean }) {
+}: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  selected?: boolean;
+  /**
+   * 'sm' is for dense horizontal strips — the trade filter has to fit four
+   * trades across a 390px phone before the fifth is cut off as a scroll hint.
+   * 'md' stays the default everywhere a chip is a primary choice.
+   */
+  size?: 'sm' | 'md';
+}) {
   return (
     <button
       type="button"
       aria-pressed={selected}
       {...props}
       className={cn(
-        'inline-flex items-center gap-1.5 rounded-pill border-[1.5px] px-4 py-3 text-body-sm',
+        'inline-flex items-center rounded-pill border-[1.5px]',
         'transition-[color,background-color,border-color] duration-[120ms] ease-standard',
+        size === 'sm' ? 'gap-1 px-3 py-1.5 text-meta' : 'gap-1.5 px-4 py-3 text-body-sm',
         'disabled:pointer-events-none disabled:opacity-45',
         selected
           ? 'border-brand-500 bg-brand-100 font-semibold text-ink-950'
@@ -28,7 +38,7 @@ export function Chip({
         className,
       )}
     >
-      {selected && <Check className="h-4 w-4" aria-hidden />}
+      {selected && <Check className={size === 'sm' ? 'h-3.5 w-3.5' : 'h-4 w-4'} aria-hidden />}
       {children}
     </button>
   );