fix: DC-5453 Update highlighted code padding

[carlagn]

Fixes #DC-5453

Summary by CodeRabbit

• Style
  • Removed top corner rounding for code blocks nested in pre to improve visual consistency.
  • Tightened horizontal alignment of diff markers (added/deleted/edited lines) so markers sit closer to content.
  • Increased left padding for lines with changes to improve readability and separation.
  • Changes are purely presentational; no functional behavior altered.

[coderabbitai]

Walkthrough

Removed top corner rounding for pre > code blocks and adjusted inline diff marker alignment: marker left offset reduced from 16px to 8px and added left padding for code lines containing added/deleted/edited markers. No behavioral or public API changes.

Changes

Cohort / File(s)	Summary of changes
Preformatted code corner radius src/css/custom.css	Added a pre > code rule setting border-top-right-radius: 0 !important and border-top-left-radius: 0 !important, affecting top corners of code blocks inside pre.
Inline diff marker alignment src/theme/CodeBlock/Line/styles.module.scss	Changed ::before left offset for .theme-code-block-added-line, .theme-code-block-deleted-line, .theme-code-block-edited-line from 16px to 8px. Added a global selector to increase left padding when diff-line spans are present: :global(code:has(.theme-code-block-added-line, .theme-code-block-deleted-line, .theme-code-block-edited-line) > span) { padding-left: 32px !important; }.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• fix: DC-4710 code color #7056 — Also modifies CSS for code styling, related to handling of pre vs. inline code presentation.

Suggested reviewers

• nikolasburk
• nurul3101
• Techboidesign
• mhessdev
• ankur-arch
• aidankmcalister

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title "fix: DC-5453 Update highlighted code padding" is concise, references the tracked issue, and accurately summarizes the primary change (adjusting highlighted code padding and marker alignment) present in the changeset; it is relevant to the modified styles and not misleading, though it does not mention the minor border-radius tweak in src/css/custom.css.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/DC-5453-highlight-code

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e3b2601 and 300cd8e.

📒 Files selected for processing (1)

• src/theme/CodeBlock/Line/styles.module.scss (4 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• src/theme/CodeBlock/Line/styles.module.scss

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: Check internal links
• GitHub Check: runner / linkspector
• GitHub Check: Lost Pixel

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Dangerous URL check

No absolute URLs to prisma.io/docs found.
No local URLs found.

[github-actions]

Redirect check

This PR probably requires the following redirects to be added to static/_redirects:

• This PR does not change any pages in a way that would require a redirect.

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

src/theme/CodeBlock/Line/styles.module.scss (1)

10-15: Align left gutter math: adjust padding-left from 42px → 32px

You moved the marker from 16px → 8px but line padding remains 42px, which increases the gap. Suggest reducing the left padding on added/deleted/edited lines to 32px for consistent alignment.

Apply:

 :global(.theme-code-block-added-line) {
   background-color: var(--docusaurus-added-code-line-bg);
   display: block;
-  padding: 0 var(--ifm-pre-padding) 0 42px;
+  padding: 0 var(--ifm-pre-padding) 0 32px;
   position: relative;
 }
 ...
 :global(.theme-code-block-deleted-line) {
   background-color: var(--docusaurus-deleted-code-line-bg);
   display: block;
-  padding: 0 var(--ifm-pre-padding) 0 42px;
+  padding: 0 var(--ifm-pre-padding) 0 32px;
   position: relative;
 }
 ...
 :global(.theme-code-block-edited-line) {
   background-color: var(--docusaurus-edited-code-line-bg);
   display: block;
-  padding: 0 var(--ifm-pre-padding) 0 42px;
+  padding: 0 var(--ifm-pre-padding) 0 32px;
   position: relative;
 }

Also applies to: 22-27, 35-40

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b57f1ae and e3b2601.

📒 Files selected for processing (2)

• src/css/custom.css (1 hunks)
• src/theme/CodeBlock/Line/styles.module.scss (4 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: runner / linkspector
• GitHub Check: Check internal links
• GitHub Check: Lost Pixel

🔇 Additional comments (2)

src/css/custom.css (1)

1572-1575: Double‑check corner radius interactions with pre container

pre often owns the visual border radius. For consistency across themes, verify that removing only code’s top radii doesn’t clash with any radius on pre (flattened top on code but rounded pre). Test in light/dark and with/without title bars if present.

src/theme/CodeBlock/Line/styles.module.scss (1)

106-114: Verify mixed states: line numbers on/off, highlight + added/deleted/edited combos

Padding and marker offsets can interact with:

• line numbers (.codeLineNumber/.codeLineContent),
• highlighted lines (.theme-code-block-highlighted-line),
• blocks with only deleted/edited lines.

Please spot-check these scenarios to avoid misalignment or double-indentation.

[cloudflare-workers-and-pages]

Deploying docs with    Cloudflare Pages

Latest commit:	300cd8e
Status:	✅  Deploy successful!
Preview URL:	https://12f3eea7.docs-51g.pages.dev
Branch Preview URL:	https://fix-dc-5453-highlight-code.docs-51g.pages.dev

View logs