🐛 Bug: Copy Button & Schema Label Missing Top/Right Margin in Code Blocks

[Tushar8466]

Describe the bug

The copy icon (📋) and the "schema" / "data" label that appear in code blocks are positioned fixed/sticky to the top-right corner without any margin from the top and right edges of the code block container. This causes them to appear flush against the border, which looks visually unpolished and can also partially overlap the code content.

Steps To Reproduce

1. Navigate to the "The basics" page in the Docs section.
2. Observe any code block (e.g., the empty schema {} block or the data examples below it).
3. Notice the copy icon and "schema"/"data" label are pinned with no spacing from the top-right corner of the code block.

Expected Behavior

The copy button and label should have consistent margin/padding from the top and right edges of the code block — e.g., margin-top: 8px and margin-right: 8px (or equivalent) — so they appear visually balanced and do not touch the border.

Actual Behaviour

The copy button and label are flush to the top-right with no visible margin, making the UI feel cramped.

Suggested Fix

Add top and right margin/padding to the sticky copy button and badge container inside code blocks:

.code-block-actions {
  margin-top: 8px;
  margin-right: 8px;
}

Device Information [optional]

• OS:MacOS
• Browser:Chrome
• version:

Screenshots

Are you working on this issue?

Yes

Do you think this work might require an [Architectural Decision Record (ADR)]? (significant or noteworthy)

Yes

[Tushar8466]

@vtushar06 Please assign this to me

[vtushar06]

Hey @Tushar8466, thanks for raising this, Before we move forward, could you add screenshots showing the issue after changes? Also, to clarify, this fix wouldn't require an ADR, that's reserved for significant architectural changes. Once we can see the visual issue, we'll decide if it needs a fix.

[Tushar8466]

After

Before

[Tushar8466]

@vtushar06 The after images have been added. Please review at your earliest convenience.