fix(sessions): shrink resource chips and handle overflow

[adboio]

Problem

The "PostHog resources used" chips above the composer were a bit too large relative to the surrounding UI, and a long list of resources had no graceful handling — it could wrap across multiple rows and crowd the composer.

Why: Direct feedback from Michael that the bar "is really nice btw, although the buttons and text are a bit too large relative to the UI nearby" — plus a request to handle the case where there are too many chips and they might overflow.

Changes

• Shrunk the chips and label: text 12px → 11px, chip icons 12 → 11, inter-chip gap 2 → 1.
• Graceful overflow: chips collapse past a max (6) behind a +N more badge that toggles to Show less, long labels truncate, and the row is clipped so it can never push wider than the chat content width.
• Preserved existing behavior (per-product icons, clickable docs links, placement mirroring PlanStatusBar).

How did you test this?

• biome lint on the changed file — clean.
• pnpm build (full topological build) succeeded, then pnpm --filter @posthog/ui typecheck — no errors in the changed file.
• Did not run the app / Storybook in this environment.

Automatic notifications

• Publish to changelog?
• Alert Sales and Marketing teams?

---

Created with PostHog Code from a Slack thread

[github-actions]

React Doctor could not complete this scan.

No React dependency found in /tmp/react-doctor-baseline-rI5JBW/package.json. Add "react" to dependencies (or peerDependencies) and re-run.

_{Reviewed by React Doctor for commit e240eb2.}

[greptile-apps]

_{Reviews (1): Last reviewed commit: "fix(sessions): shrink resource chips and..." | Re-trigger Greptile}

[adboio]

• fix(sessions): shrink resource chips and handle overflow #2619 👈 (View in Graphite)
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[greptile-apps]

_{Reviews (2): Last reviewed commit: "fix(sessions): shrink resource chips and..." | Re-trigger Greptile}