From ddcf0aef9f1b3c81ec5a9b709dd62d2fcc773996 Mon Sep 17 00:00:00 2001
From: iroiro147 <sarthak.singh@juspay.in>
Date: Tue, 4 Aug 2026 19:20:29 +0530
Subject: [PATCH] fix(desktop): stop clipping focus ring on channel intro
 action cards (#2392) (#4374)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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>
---
 desktop/src/features/messages/ui/ChannelIntroBlock.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/desktop/src/features/messages/ui/ChannelIntroBlock.tsx b/desktop/src/features/messages/ui/ChannelIntroBlock.tsx
index 98300acb3..76d1960b9 100644
--- a/desktop/src/features/messages/ui/ChannelIntroBlock.tsx
+++ b/desktop/src/features/messages/ui/ChannelIntroBlock.tsx
@@ -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);