fix(web): reserve clearance for MCP Copy button so it stops overlapping the snippet (#847)

* fix(web): reserve clearance for the MCP Copy button so it stops overlapping the snippet

The Copy button is absolutely positioned at top: 8 right: 8 over the
snippet <pre>, but the <pre> only had padding: 12px 14px so the first
line of the command sat directly under the button. Wrapped bash one-
liners also reached the right edge and continued behind it.

Reserve the clearance in the <pre>'s own padding instead of moving
the button: padding: '40px 80px 12px 14px' keeps the button anchored
where it is, lets the first line render below it, and stops a wrapped
one-liner short of the button column.

Closes #632

* fix(web): bump MCP snippet right padding to clear the wider Copied state

Reviewer pointed out 80px right clearance can be tight at elevated
font sizes / zoom: the post-click Copied state (icon + text + button
padding + 8px right offset) reaches close to that limit. Bump to
104px so there's a comfortable buffer in either button state.

---------

Co-authored-by: Nagendhra <nagendhra405@gmail.com>
This commit is contained in:
Nagendhra Madishetti 2026-05-07 23:07:25 -04:00 committed by GitHub
parent 6e473a4f77
commit 604d3660f2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -2474,7 +2474,15 @@ function IntegrationsSection() {
style={{
background: 'var(--surface-2, #11141a)',
color: 'var(--fg-1, #e6e6e6)',
padding: '12px 14px',
// Reserve top clearance for the absolutely-positioned
// Copy button so the first line of the snippet does not
// sit underneath it, and reserve right clearance so a
// wrapped bash one-liner stops short of the button rather
// than scrolling behind it. The right padding is sized
// for the wider "Copied" post-click state (icon + text +
// button padding + the 8px right offset) with a few px
// of buffer for elevated font sizes / zoom. Issue #632.
padding: '40px 104px 12px 14px',
borderRadius: 8,
overflowX: 'auto',
fontFamily: