fix(desktop): stop clipping focus ring on channel intro action cards (#2392) (#4374)

## What

Fixes #2392 — the action cards in the empty-channel intro ("Create
agent", "Add people") had their `focus-visible` ring clipped by the
surrounding scroll container.

## Root cause

The cards sit in a `flex ... overflow-x-auto pb-1` row. Setting
`overflow-x` (without `overflow-y`) makes the browser compute
`overflow-y: auto` as well, so the container clips anything painted
outside its padding box — including the cards' `focus-visible:ring-2`
box-shadow. With only `pb-1` padding, the top/left/right of the ring
were cut off when Tabbing to a card.

## Change

`desktop/src/features/messages/ui/ChannelIntroBlock.tsx` — `pb-1` →
`p-1` on the action-cards scroll container, reserving 4px on all four
sides so the focus ring renders fully inside the scroll container's
padding box.

- 1 file, 1 line. No behavior change for mouse users or layout.

## Verification

- `pnpm typecheck` — clean
- `pnpm exec biome check src/features/messages/ui/ChannelIntroBlock.tsx`
— clean
- `pnpm check:file-sizes` — clean
- Desktop unit suite — **3906/3906 pass**

Signed-off-by: Sarthak Singh <sarthak.singh@juspay.in>

Signed-off-by: Sarthak Singh <sarthak.singh@juspay.in>
This commit is contained in:
iroiro147
2026-08-04 06:50:29 -07:00
committed by GitHub
parent feccf4eabc
commit ddcf0aef9f
@@ -63,7 +63,7 @@ export function ChannelIntroBlock({
</p>
) : null}
{intro.actions?.length ? (
<div className="mt-4 flex max-w-full flex-nowrap gap-3 overflow-x-auto pb-1">
<div className="mt-4 flex max-w-full flex-nowrap gap-3 overflow-x-auto p-1">
{intro.actions.map((action) => {
const hasDescription = Boolean(action.description);