fix(agentex-ui): stop clipping agent badge hover scale and shadow

[erichwoo-scale]

What

Adds p-2 to the agents-list scroll container so agent chips' framer-motion hover scale (scale: 1.05), rounded corners, and the selected chip's shadow-md are no longer clipped at the container edge.

Before:

After:

Screen.Recording.2026-07-08.at.7.48.36.PM.mov

Why

agentex-ui/components/agents-list/agents-list.tsx uses overflow-y-auto for the max-h-[60vh] scroll. Per CSS, a non-visible overflow on one axis forces the cross axis to clip too, so transforms and shadows — which don't grow the layout box — get cut off. The result: the hover resize appears to poke outside the chip's own rounded box, and the selected chip's top/bottom border looks flattened. Reproduces in both selected and unselected states.

Pre-existing on main; not introduced by the in-flight account-picker / OIDC branches (both leave the agent-badge/agents-list files byte-identical to main).

Test plan

• Hover agent chips on the home view (selected + unselected) — the scale animation stays within the rounded outline, no clipping.
• Selected chip's shadow renders fully.
• A long agent list still scrolls under max-h-[60vh].

Fixes AGX1-474

🤖 Generated with Claude Code

Greptile Summary

Adds p-2 padding to the scrollable agent-chips container in agents-list.tsx to prevent CSS overflow clipping from cutting off Framer Motion hover-scale animations and shadow-md on selected chips.

• The root cause (non-visible overflow forces both axes to clip transforms/shadows that don't affect layout box size) is correctly diagnosed and the fix is minimal and targeted.
• The loading-skeleton div on line 42 does not receive matching p-2, leaving a slight layout shift between the skeleton and loaded states, though neither overflow-y-auto nor the hover effects exist on that branch so visual clipping is not a concern there.

Confidence Score: 5/5

Safe to merge — a single-class addition to one container element with no logic changes.

The change is a one-word Tailwind class addition that correctly addresses a well-understood CSS overflow-clipping behavior. The only gap is that the skeleton loading branch doesn't receive the same padding, producing a minor layout shift on transition, but this does not affect correctness or user data.

No files require special attention beyond the optional skeleton-branch padding alignment noted in the inline comment.

Important Files Changed

Filename	Overview
agentex-ui/components/agents-list/agents-list.tsx	Single-class addition (p-2) to the scrollable motion.div container to prevent overflow clipping of hover scale animations and shadows; change is correct and safe.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Container: overflow-y-auto] -->|No padding| B[Child element renders at container edge]
    B --> C[scale 1.05 / shadow-md extends beyond layout box]
    C --> D[CSS clips at overflow boundary]

    A2[Container: overflow-y-auto + p-2] -->|8px inset on all sides| B2[Child element inset from container edge]
    B2 --> C2[scale 1.05 / shadow-md fits within padded space]
    C2 --> D2[No clipping]

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
    A[Container: overflow-y-auto] -->|No padding| B[Child element renders at container edge]
    B --> C[scale 1.05 / shadow-md extends beyond layout box]
    C --> D[CSS clips at overflow boundary]

    A2[Container: overflow-y-auto + p-2] -->|8px inset on all sides| B2[Child element inset from container edge]
    B2 --> C2[scale 1.05 / shadow-md fits within padded space]
    C2 --> D2[No clipping]

Loading

Prompt To Fix All With AI

Fix the following 1 code review issue. Work through them one at a time, proposing concise fixes.

---

### Issue 1 of 1
agentex-ui/components/agents-list/agents-list.tsx:42
The loaded state now has `p-2` to allow hover animations and shadows to breathe, but the skeleton branch on line 42 has no matching padding. When `isLoading` flips to `false` the container jumps from zero padding to 8px, which can cause a small layout shift. Adding `p-2` to the skeleton div keeps the two states visually consistent during the transition.

```suggestion
      <div className="mb-2 flex max-w-4xl flex-wrap items-center justify-center gap-2 p-2">
```

_{Reviews (1): Last reviewed commit: "fix(agentex-ui): stop clipping agent bad..." | Re-trigger Greptile}