feat: modify the style of the prompt component#97
Conversation
WalkthroughVitePress theme stylesheet updated to modify custom block layout behavior. Flexbox display removed from custom blocks, pseudo-element changed from inline-block to float positioning, and left margins added to ordered lists and block content within custom block variants. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In @.vitepress/theme/style.css:
- Around line 500-508: The rules for list indentation double-apply because both
the selectors ".vp-doc .custom-block.info ol, .vp-doc .custom-block.warning ol,
.vp-doc .custom-block.danger ol, .vp-doc .custom-block.tip ol" and ".vp-doc
.custom-block .custom-block-content" add margin-left; remove the explicit ol
selector rules and keep the 32px margin only on ".vp-doc .custom-block
.custom-block-content", then add a reset for lists inside that container (reset
ol and ul margin-left to 0 inside ".vp-doc .custom-block .custom-block-content")
so nested lists do not accumulate indentation.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 7978c001-4d3d-4feb-b7b6-238c2cc7e9ea
📒 Files selected for processing (1)
.vitepress/theme/style.css
| .vp-doc .custom-block.info ol, | ||
| .vp-doc .custom-block.warning ol, | ||
| .vp-doc .custom-block.danger ol, | ||
| .vp-doc .custom-block.tip ol { | ||
| margin-left: 32px; | ||
| } | ||
| .vp-doc .custom-block .custom-block-content { | ||
| margin-left: 32px; | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
In VitePress v1.x, what is the default HTML structure for markdown custom containers (info/warning/danger/tip)? Specifically, are list elements typically wrapped by a .custom-block-content container?
💡 Result:
In VitePress v1.x, the default HTML structure for markdown custom containers (info, warning, danger, tip) is a div with class "custom-block" (and a type-specific subclass like "custom-block-info"), containing a div.custom-block-title with the title (e.g., "INFO") and a div.custom-block-content wrapping the container's content. List elements (ul/ol/li) within custom containers are typically wrapped by the .custom-block-content div, as it contains all the parsed markdown content from the ::: ... ::: block.
Citations:
- 1: https://vitepress.dev/guide/markdown
- 2: https://vitepress-template.edgeone.app/advanced/markdown-extensions.html
- 3: https://accelerator.iiasa.ac.at/docs/markdown-examples
- 4: custom containers style option vuejs/vitepress#1157
🏁 Script executed:
cat -n .vitepress/theme/style.css | sed -n '490,520p'Repository: opentiny/docs
Length of output: 927
🏁 Script executed:
# Search for any CSS rules that affect .custom-block-content margins or list margins
rg "\.custom-block.*\{|margin.*:" .vitepress/theme/style.css -A 2 -B 1 | head -100Repository: opentiny/docs
Length of output: 1670
🏁 Script executed:
# Check for any resets or specific rules for lists inside custom-block-content
rg "custom-block-content.*ol|custom-block-content.*ul|custom-block.*ol.*margin|custom-block.*ul.*margin" .vitepress/theme/style.css -A 2Repository: opentiny/docs
Length of output: 39
Fix double indentation for lists inside custom blocks.
Lines 500–508 apply conflicting margin-left rules: the ol selector adds 32px indentation and .custom-block-content adds another 32px, resulting in 64px total indentation when lists are nested inside the content wrapper (which VitePress renders by default).
Remove the explicit list indentation rule and apply margin only to .custom-block-content, then reset list margins to prevent the compound effect:
Suggested fix
-.vp-doc .custom-block.info ol,
-.vp-doc .custom-block.warning ol,
-.vp-doc .custom-block.danger ol,
-.vp-doc .custom-block.tip ol {
- margin-left: 32px;
-}
.vp-doc .custom-block .custom-block-content {
- margin-left: 32px;
+ margin-inline-start: 32px;
+}
+.vp-doc .custom-block .custom-block-content :is(ol, ul) {
+ margin-inline-start: 0;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| .vp-doc .custom-block.info ol, | |
| .vp-doc .custom-block.warning ol, | |
| .vp-doc .custom-block.danger ol, | |
| .vp-doc .custom-block.tip ol { | |
| margin-left: 32px; | |
| } | |
| .vp-doc .custom-block .custom-block-content { | |
| margin-left: 32px; | |
| } | |
| .vp-doc .custom-block .custom-block-content { | |
| margin-inline-start: 32px; | |
| } | |
| .vp-doc .custom-block .custom-block-content :is(ol, ul) { | |
| margin-inline-start: 0; | |
| } |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In @.vitepress/theme/style.css around lines 500 - 508, The rules for list
indentation double-apply because both the selectors ".vp-doc .custom-block.info
ol, .vp-doc .custom-block.warning ol, .vp-doc .custom-block.danger ol, .vp-doc
.custom-block.tip ol" and ".vp-doc .custom-block .custom-block-content" add
margin-left; remove the explicit ol selector rules and keep the 32px margin only
on ".vp-doc .custom-block .custom-block-content", then add a reset for lists
inside that container (reset ol and ul margin-left to 0 inside ".vp-doc
.custom-block .custom-block-content") so nested lists do not accumulate
indentation.
1 participant
Summary by CodeRabbit