Smart Filters — Overflow Pattern Exploration

4 variants for cropping a variable-length chip list to one line. Use the sliders to stress-test each.

12 items
100%
Variant 1 — "+N more" Counter Chip with Popover

JS measures which chips fit, hides the rest, appends a "+N more" chip. Click it to open a popover showing all hidden items. Click backdrop or the chip again to close. Gmail / Figma pattern.

Smart Filters
Strengths
Clear count of hidden items. Inline access — user picks from popover without leaving context. Familiar pattern.
Trade-offs
Requires JS measurement + ResizeObserver. "+N" chip width varies, needs reserved space.
Variant 2 — Horizontal Scroll with Arrow Buttons

All chips render in a scrollable row. Fade gradients + arrow buttons provide desktop scroll affordance. Click arrows or use mousewheel/trackpad to scroll. Netflix / Spotify filter bar pattern.

Smart Filters
Strengths
All items reachable without popup. No items "hidden" — just offscreen. Arrows solve desktop discoverability.
Trade-offs
No count of total items. User must scroll to discover what's there. Fade can clip last visible chip's text.
Variant 3 — Inline Expand / Collapse

Chips wrap naturally but container is height-locked to one row. Toggle chip expands to reveal all rows with smooth animation, then collapses. Click the toggle to try it.

Smart Filters
Strengths
All items visible in-context. No popover or navigation. Smooth animation. Spatial layout shows groupings.
Trade-offs
Pushes content below downward. Multi-row may not fit visual language. Toggle must always be on first row.
Variant 4 — "View all N" Link (JS-placed)

JS measures which chips fit, then places a "View all N" text link at the end of the visible chips. The link could open a dedicated page or modal. Typographically clean.

Smart Filters
Strengths
Very clean. Link stands apart from chips visually. Shows total count. Simple to implement.
Trade-offs
Requires a destination (page/modal). Extra step to reach hidden items. Doesn't preview what's hidden.
Variant 5 — Inline Chip Toggle (expand in place)

JS measures which chips fit on one row, places a "+N more" chip at the end (like V1), but clicking it expands the container to show all wrapped rows (like V3). No popover, no page navigation. Click again to collapse.

Smart Filters
Strengths
"+N" chip is inline and feels native. Expand is in-context — no popover layering. Collapse returns to clean single row. Best of V1 + V3.
Trade-offs
Pushes content below when expanded. Requires JS measurement. Slightly more complex than pure popover.
Variant 6 — Toggle in Section Header

The "show N more / show less" link lives next to the "Smart Filters" label, not inside the chip flow. It stays anchored while the chip area expands below. Clean separation of control from content.

Smart Filters
Strengths
Toggle never moves — always in the same spot. Clean separation of label/action and content. Familiar "show more" pattern from feeds. Simplest mental model.
Trade-offs
Toggle is further from the hidden chips (Fitts's law). "Show 8 more" is less glanceable than a chip that says "+8 more" inline.
Variant 6.1 — Toggle Inline with Label

Like V6, but the "show N more / show less" sits directly next to the label text — not pushed to the far right. Keeps the toggle close to the label for a tighter visual grouping. The toggle stays put when chips expand.

Smart Filters
Strengths
Toggle is visually grouped with the label — reads as "Smart Filters · Show 8 more". Never moves. Tighter layout than V6's right-aligned link.
Trade-offs
At very long label names the toggle could crowd the text. Slightly less conventional than right-aligned actions.
Variant 7 — Hover to Expand

Collapsed state shows fitting chips + a "View all N →" text hint (like V4, but not clickable). Hovering anywhere on the box smoothly expands to show all chips. Moving the cursor out collapses back. Zero clicks needed to browse — pure hover intent.

Smart Filters
Strengths
Zero clicks to browse — just hover. Feels lightweight and explorable. Hint text communicates hidden count. Collapse is automatic on mouse-out.
Trade-offs
No hover on touch/mobile — needs a fallback. Can feel jumpy if user's cursor passes through unintentionally. Content below shifts on expand.

Decision Framework — for a "pick a matter" interaction

Best for quick selection from overflow → Variant 1. Popover keeps user in context, shows exactly what's hidden, one click to pick.
Best if all items should feel equally reachable → Variant 2. No hierarchy — scroll reveals everything, nothing is "hidden behind a click."
Best if scan-and-compare matters → Variant 3. Expanding shows all items at once so user can visually compare before picking.
Best if "Smart Filters" is secondary UI → Variant 4. Minimal footprint, defers to a full matters page for real selection.