fix: Add padding to diff code blocks

[chargome]

fixes #10510

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
changelog	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 6, 2024 3:34pm
develop-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 6, 2024 3:34pm
sentry-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 6, 2024 3:34pm

[chargome]

Before:

After:

[szokeasaurusrex]

I will take a look at the preview once it is ready. Since I am not super experienced with CSS, it would be good if someone with more experience could take a look at the code changes

[szokeasaurusrex]

Maybe update this comment (and the comment for the above changes) to reflect that we are also setting the padding here

[codecov]

Bundle Report

Changes will increase total bundle size by 158 bytes ⬆️

Bundle name	Size	Change
sentry-docs-server	8.25MB	6 bytes ⬇️
sentry-docs-edge-server	252.6kB	3 bytes ⬇️
sentry-docs-client	6.24MB	167 bytes ⬆️

[szokeasaurusrex]

We might also want to inform folks somewhere about how they should write diff blocks going forward. Previously, unchanged and changed lines were only aligned when the unchanged lines were indented two spaces, like so:

  This unchanged line
+ is aligned with this changed line.

But this unchanged line
+ would not be aligned.

Following your changes, does alignment work in the same way?

[chargome]

Alignment works the same way, but the padding is now added automatically. So if a diff block currently contains manual indentations, the padding will be added on top. There are ~100 diff blocks in the project, I can check if they need to be updated.

[ezio-melotti]

The selector is a bit too generic and adds padding after other operators in the code examples. I'm trying to fix that in:

• Fix wrong operator spacing in docs #11052