fix(renderer): stabilize markdown scrollbars

[zerob13]

Summary

• Make Markdown code block Monaco rendering explicitly keep wordWrap: 'on'.
• Add scoped scrollbar gutter stabilization for Markdown code block scrollports without forcing horizontal scrollbars.
• Add SDD docs for issue [BUG] markdown 渲染 滚动条抖动 #1763 and a renderer test that guards the scoped MarkdownRenderer styling entry point.

Testing

• pnpm run format
• pnpm run i18n
• pnpm run lint
• pnpm run typecheck
• pnpm test:renderer -- test/renderer/components/MarkdownRenderer.test.ts

Manual Verification

• On Windows 11, stream a response with a long fenced code block similar to issue [BUG] markdown 渲染 滚动条抖动 #1763.
• Confirm normal long code wraps by default and does not gain a permanent horizontal scrollbar.
• Confirm the code block no longer visibly jitters while fallback/enhanced rendering settles or while a real vertical scrollbar is needed.
• Confirm regular Markdown paragraphs, Markdown artifacts, and workspace Markdown preview still render normally.

Closes #1763

Summary by CodeRabbit

• Bug Fixes

  • Fixed scrollbar jitter when rendering Markdown code blocks
  • Stabilized code block layout during streaming

• New Features

  • Added word wrapping to code blocks

• Tests

  • Added test coverage for code block scrollbar stabilization

• Documentation

  • Added implementation plan and task documentation

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds two CSS/config changes to MarkdownRenderer.vue to fix Windows scrollbar jitter during streaming Markdown code block rendering: wordWrap: 'on' in the Monaco editor config and scrollbar-gutter: stable on scoped .markstream-vue code block elements. A root-class regression test is added, and three issue documentation files (spec, plan, tasks) are introduced.

Changes

Scrollbar Jitter Fix

Layer / File(s)	Summary
MarkdownRenderer: wordWrap and scrollbar-gutter fix src/renderer/src/components/markdown/MarkdownRenderer.vue, test/renderer/components/MarkdownRenderer.test.ts	codeBlockMonacoOption gains wordWrap: 'on'; new .markstream-vue CSS rules add scrollbar-gutter: stable to code block scrollports; root template class attribute is reformatted (no class change); a new test asserts markdown-renderer-root is present on the component root element.
Issue spec, plan, and task docs docs/issues/markdown-codeblock-scrollbar-jitter/spec.md, docs/issues/markdown-codeblock-scrollbar-jitter/plan.md, docs/issues/markdown-codeblock-scrollbar-jitter/tasks.md	Three new documents describe the problem (Windows scrollbar jitter during streaming), the implementation approach (Monaco word wrap, scoped scrollbar-gutter, preserved overflow: auto), and a structured task checklist with verification steps.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐇 Hop hop, no more jitter and shake,
A scrollbar that wiggles was hard to take!
With stable declared and word-wrap set true,
The code blocks sit still — hooray, that'll do!
🌿 The rabbit has fixed it, neat as a bun~

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title 'fix(renderer): stabilize markdown scrollbars' accurately summarizes the main change: fixing scrollbar jitter in Markdown code blocks by implementing stabilization measures.
Linked Issues check	✅ Passed	The PR directly addresses issue #1763 by implementing CSS scrollbar stabilization (scrollbar-gutter: stable) and Monaco word wrapping to resolve the reported jitter in Markdown code block rendering.
Out of Scope Changes check	✅ Passed	All changes are scoped to documentation planning, task tracking, and targeted MarkdownRenderer component modifications with stabilization CSS and wordWrap configuration, directly addressing the scrollbar jitter issue.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/markdown-codeblock-scrollbar-jitter

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

🧹 Nitpick comments (2)

docs/issues/markdown-codeblock-scrollbar-jitter/plan.md (1)

73-77: 💤 Low value

Optional: Consider rewording repeated sentence beginnings.

Lines 73–77 begin successive sentences with "Do not", which LanguageTool flags as repetitive style. Consider varying sentence structure for improved readability (e.g., "Avoid patching..., prefer CSS overrides..., refrain from forcing..."). This is a minor improvement and can be deferred.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@docs/issues/markdown-codeblock-scrollbar-jitter/plan.md` around lines 73 -
77, In the bulleted list on lines 73-77 of the plan.md file, replace the
repetitive "Do not" sentence starters with varied phrases to improve
readability. Reword each bullet point to use different opening phrases such as
"Avoid", "Prefer", "Refrain from", or similar alternatives while maintaining the
same meaning and context of the original statements.

Source: Linters/SAST tools

docs/issues/markdown-codeblock-scrollbar-jitter/spec.md (1)

73-77: 💤 Low value

Optional: Consider rewording repeated sentence beginnings.

Lines 73–77 begin successive sentences with "Do not / Prefer / Do not / Do not / Do not", which LanguageTool flags as repetitive style. Consider varying the sentence structure or using synonyms for clarity (e.g., "Avoid patching... / Consider CSS overrides instead... / Refrain from forcing..."). This is a minor readability improvement and can be deferred.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@docs/issues/markdown-codeblock-scrollbar-jitter/spec.md` around lines 73 -
77, The specification in spec.md at lines 73-77 contains repetitive sentence
beginnings with multiple consecutive sentences starting with "Do not" or similar
phrasing, which impacts readability. Rephrase these sentences to vary the
sentence structure and use alternative synonyms such as "Avoid", "Refrain from",
"Consider using", or restructure them to begin with different parts of speech or
clause types, ensuring the technical meaning and requirements remain clear while
improving the overall flow and readability of the specification.

Source: Linters/SAST tools

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@docs/issues/markdown-codeblock-scrollbar-jitter/plan.md`:
- Around line 73-77: In the bulleted list on lines 73-77 of the plan.md file,
replace the repetitive "Do not" sentence starters with varied phrases to improve
readability. Reword each bullet point to use different opening phrases such as
"Avoid", "Prefer", "Refrain from", or similar alternatives while maintaining the
same meaning and context of the original statements.

In `@docs/issues/markdown-codeblock-scrollbar-jitter/spec.md`:
- Around line 73-77: The specification in spec.md at lines 73-77 contains
repetitive sentence beginnings with multiple consecutive sentences starting with
"Do not" or similar phrasing, which impacts readability. Rephrase these
sentences to vary the sentence structure and use alternative synonyms such as
"Avoid", "Refrain from", "Consider using", or restructure them to begin with
different parts of speech or clause types, ensuring the technical meaning and
requirements remain clear while improving the overall flow and readability of
the specification.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: c7cd8fbe-1dd5-4c33-98cc-bac5bfe9ade0

📥 Commits

Reviewing files that changed from the base of the PR and between b31e8f6 and bef9149.

📒 Files selected for processing (5)

• docs/issues/markdown-codeblock-scrollbar-jitter/plan.md
• docs/issues/markdown-codeblock-scrollbar-jitter/spec.md
• docs/issues/markdown-codeblock-scrollbar-jitter/tasks.md
• src/renderer/src/components/markdown/MarkdownRenderer.vue
• test/renderer/components/MarkdownRenderer.test.ts