Display misplacement of @monaco-editor/react in starlight

[HuakunShen]

What version of starlight are you using?

0.23.1

What version of astro are you using?

4.8.6

What package manager are you using?

npm

What operating system are you using?

Mac

What browser are you using?

Edge, Arc, Chrome

Describe the Bug

Displaying react monaco editor in starlight has line misplacement. Not sure what is reason is, no error displayed.

The editor works in plain astro website, but not starlight.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/withastro-starlight-5zso9e?file=src%2Fcontent%2Fdocs%2Findex.mdx

Participation

• [ ] I am willing to submit a pull request for this issue.

[HuakunShen]

I also tried to include monaco-editor without the react wrapper. Got the same problem.

I also tried @monaco-editor/react in docusaurus, the display has no problem.

Comparison with Inspector

Starlight

Docusaurus

[HuakunShen]

Problem solved by changing the margin top of this element from 1rem to 0rem.

So the patch to fix this is adding a custom css

.sl-markdown-content :not(a, strong, em, del, span, input, code)+ :not(a, strong, em, del, span, input, code, :where(.not-content *)) {
    margin-top: 0rem;
}

Not sure if this will affect other pages, so adding .monaco-editor to the selector may be a better solution.

.sl-markdown-content .monaco-editor :not(a, strong, em, del, span, input, code)+ :not(a, strong, em, del, span, input, code, :where(.not-content *)) {
    margin-top: 0rem;
}

Although there is a workaround, this is still a bug that need to be fixed.

[delucis]

Hi @HuakunShen! I think you’re looking for Starlight’s not-content CSS class.

Applying that to components will opt them out of Starlight’s default margins etc.

Could you try that?

[delucis]

Going to close this as I’m fairly sure not-content should fix this. Thanks again for the issue — let me know if you run into anything else.

[HuakunShen]

@delucis Thank you it works. Didn't know this feature.