Trade strip: smaller pills, four visible, scroll hint

The pills were sized for a form, not a dense strip: at px-4 py-3 only
two and a bit fitted across a 390px phone, so the trade filter read as
a two-trade list rather than a scrollable set.

- Chip gains a `size` prop. 'sm' (px-3 py-1.5, text-meta) is for
  horizontal strips; 'md' stays the default everywhere a chip is a
  primary choice, so nothing else moves.
- Four trades now fit with the fifth cut at the edge, which is what
  tells you the row scrolls.
- Added a right-edge fade. The scrollbar is hidden, so without it a row
  that simply ends at the bezel reads as the whole list.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

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>
   );