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

## 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:
<img width="351" height="73" alt="Screenshot 2026-07-08 at 7 36 04 PM"
src="https://github.com/user-attachments/assets/5f9ba7de-02c4-448e-9557-527d364a58ca"
/>

<img width="225" height="91" alt="Screenshot 2026-07-08 at 7 37 13 PM"
src="https://github.com/user-attachments/assets/26442719-91b2-4d58-a776-9ec363007616"
/>

After:


https://github.com/user-attachments/assets/f5130050-7903-414b-ba5a-53c6f66045a9

## 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](https://claude.com/claude-code)

<!-- greptile_comment -->

<h3>Greptile Summary</h3>

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.

<details><summary><h3>Confidence Score: 5/5</h3></summary>

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.
</details>

<details><summary><h3>Important Files Changed</h3></summary>

| 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. |

</details>

<details><summary><h3>Flowchart</h3></summary>

<a href="#gh-light-mode-only">

```mermaid
%%{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]
```

</a>
<a href="#gh-dark-mode-only">

```mermaid
%%{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]
```

</a>
</details>

<a
href="https://app.greptile.com/api/ide/cursor?prompt=Fix%20the%20following%201%20code%20review%20issue.%20Work%20through%20them%20one%20at%20a%20time%2C%20proposing%20concise%20fixes.%0A%0A---%0A%0A%23%23%23%20Issue%201%20of%201%0Aagentex-ui%2Fcomponents%2Fagents-list%2Fagents-list.tsx%3A42%0AThe%20loaded%20state%20now%20has%20%60p-2%60%20to%20allow%20hover%20animations%20and%20shadows%20to%20breathe%2C%20but%20the%20skeleton%20branch%20on%20line%2042%20has%20no%20matching%20padding.%20When%20%60isLoading%60%20flips%20to%20%60false%60%20the%20container%20jumps%20from%20zero%20padding%20to%208px%2C%20which%20can%20cause%20a%20small%20layout%20shift.%20Adding%20%60p-2%60%20to%20the%20skeleton%20div%20keeps%20the%20two%20states%20visually%20consistent%20during%20the%20transition.%0A%0A%60%60%60suggestion%0A%20%20%20%20%20%20%3Cdiv%20className%3D%22mb-2%20flex%20max-w-4xl%20flex-wrap%20items-center%20justify-center%20gap-2%20p-2%22%3E%0A%60%60%60%0A%0A&pr=352&platform=github"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://greptile-static-assets.s3.amazonaws.com/badges/FixAllInCursorDark.svg?v=6"><source
media="(prefers-color-scheme: light)"
srcset="https://greptile-static-assets.s3.amazonaws.com/badges/FixAllInCursor.svg?v=6"><img
alt="Fix All in Cursor"
src="https://greptile-static-assets.s3.amazonaws.com/badges/FixAllInCursor.svg?v=6"></picture></a>
<a
href="https://app.greptile.com/ide/claude-code?prompt=Fix%20the%20following%201%20code%20review%20issue.%20Work%20through%20them%20one%20at%20a%20time%2C%20proposing%20concise%20fixes.%0A%0A---%0A%0A%23%23%23%20Issue%201%20of%201%0Aagentex-ui%2Fcomponents%2Fagents-list%2Fagents-list.tsx%3A42%0AThe%20loaded%20state%20now%20has%20%60p-2%60%20to%20allow%20hover%20animations%20and%20shadows%20to%20breathe%2C%20but%20the%20skeleton%20branch%20on%20line%2042%20has%20no%20matching%20padding.%20When%20%60isLoading%60%20flips%20to%20%60false%60%20the%20container%20jumps%20from%20zero%20padding%20to%208px%2C%20which%20can%20cause%20a%20small%20layout%20shift.%20Adding%20%60p-2%60%20to%20the%20skeleton%20div%20keeps%20the%20two%20states%20visually%20consistent%20during%20the%20transition.%0A%0A%60%60%60suggestion%0A%20%20%20%20%20%20%3Cdiv%20className%3D%22mb-2%20flex%20max-w-4xl%20flex-wrap%20items-center%20justify-center%20gap-2%20p-2%22%3E%0A%60%60%60%0A%0A&repo=scaleapi%2Fscale-agentex&pr=352&platform=github"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://greptile-static-assets.s3.amazonaws.com/badges/FixAllInClaudeDark.svg?v=6"><source
media="(prefers-color-scheme: light)"
srcset="https://greptile-static-assets.s3.amazonaws.com/badges/FixAllInClaude.svg?v=6"><img
alt="Fix All in Claude Code"
src="https://greptile-static-assets.s3.amazonaws.com/badges/FixAllInClaude.svg?v=6"></picture></a>
<a
href="https://app.greptile.com/api/ide/codex?prompt=IMPORTANT%3A%20Work%20in%20the%20repository%20%22scaleapi%2Fscale-agentex%22%20on%20the%20existing%20branch%20%22fix%2Fagentex-ui-agent-badge-hover-clip%22.%20Checkout%20that%20branch%20%E2%80%94%20do%20NOT%20create%20a%20new%20branch%20or%20open%20a%20new%20PR.%20Push%20your%20changes%20to%20%22fix%2Fagentex-ui-agent-badge-hover-clip%22.%0A%0AFix%20the%20following%201%20code%20review%20issue.%20Work%20through%20them%20one%20at%20a%20time%2C%20proposing%20concise%20fixes.%0A%0A---%0A%0A%23%23%23%20Issue%201%20of%201%0Aagentex-ui%2Fcomponents%2Fagents-list%2Fagents-list.tsx%3A42%0AThe%20loaded%20state%20now%20has%20%60p-2%60%20to%20allow%20hover%20animations%20and%20shadows%20to%20breathe%2C%20but%20the%20skeleton%20branch%20on%20line%2042%20has%20no%20matching%20padding.%20When%20%60isLoading%60%20flips%20to%20%60false%60%20the%20container%20jumps%20from%20zero%20padding%20to%208px%2C%20which%20can%20cause%20a%20small%20layout%20shift.%20Adding%20%60p-2%60%20to%20the%20skeleton%20div%20keeps%20the%20two%20states%20visually%20consistent%20during%20the%20transition.%0A%0A%60%60%60suggestion%0A%20%20%20%20%20%20%3Cdiv%20className%3D%22mb-2%20flex%20max-w-4xl%20flex-wrap%20items-center%20justify-center%20gap-2%20p-2%22%3E%0A%60%60%60%0A%0A&repo=scaleapi%2Fscale-agentex&pr=352&platform=github"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://greptile-static-assets.s3.amazonaws.com/badges/FixAllInCodexDark.svg?v=6"><source
media="(prefers-color-scheme: light)"
srcset="https://greptile-static-assets.s3.amazonaws.com/badges/FixAllInCodex.svg?v=6"><img
alt="Fix All in Codex"
src="https://greptile-static-assets.s3.amazonaws.com/badges/FixAllInCodex.svg?v=6"></picture></a>

<details><summary>Prompt To Fix All With AI</summary>

`````markdown
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">
```

`````

</details>

<sub>Reviews (1): Last reviewed commit: ["fix(agentex-ui): stop clipping
agent
bad..."](de63e30)
| [Re-trigger
Greptile](https://app.greptile.com/api/retrigger?id=42880441)</sub>

<!-- /greptile_comment -->

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: erichwoo-scale

agentex-ui/components/agents-list/agents-list.tsx

@@ -50,7 +50,7 @@ export function AgentsList({ agents, isLoading = false }: AgentsListProps) {
   return (
     <TooltipProvider delayDuration={200}>
       <motion.div
-        className="mb-2 flex max-h-[60vh] max-w-4xl flex-wrap items-center justify-center gap-2 overflow-y-auto"
+        className="mb-2 flex max-h-[60vh] max-w-4xl flex-wrap items-center justify-center gap-2 overflow-y-auto p-2"
         layout={hasMounted.current}
       >
         {displayedAgents.length > 0 ? (