Code blocks are sometimes rendered without a background

[dlqqq]

Description

Code blocks in Jupyter AI are sometimes rendered without a background and border, as shown in the screenshot below.

When this bug arises, it affects all code blocks in the chat UI. This bug exists in Jupyter AI v2.27.0.

Thank you @ellisonbg for originally reporting this issue.

Reproduce

I haven't been able to reproduce this bug myself. Our team needs to work further to determine when & how this bug arises.

Expected behavior

Code blocks should always be rendered with a background and border.

Context

Code blocks are rendered via @jupyterlab/rendermime-extension internally. The definition of the component can be found in rendermime-markdown.tsx.

[dlqqq]

Managed to reproduce this locally for the first time with Jupyter AI v2.28.1 on my M1 Macbook Pro. For context, I usually develop from my Intel Macbook Pro, which may explain why I haven't encountered this issue before.

I am running Version 130.0.6723.117 (Official Build) (arm64), the latest Chrome version available on my M1 MBP. It's possible that this rendering bug only appears on ARM64 Chrome. Will have to investigate this further.

[krassowski]

Is it worth the same JupyterLab version of do these differ?

[dlqqq]

@krassowski Great callout! My M1 MBP (bugged) is running JupyterLab v4.3.0, and my Intel MBP is running JupyterLab v4.2.2 (not bugged). I'll see if I can reproduce this on my Intel MBP and confirm/reject the hypothesis that this is due to Chrome on ARM.

[krassowski]

Could it be related to one of the CSS changes https://jupyterlab.readthedocs.io/en/latest/extension/extension_migration.html#css-styling ?

[dlqqq]

@krassowski The bug now appears on my Intel MBP (x86) after I upgrade to JupyterLab v4.3.0. This happens both in my development environment (running a dev build) and in a fresh environment (running a Conda Forge build).

Therefore, we can be confident that this issue isn't caused by Chrome on ARM or a difference between development and registry installs.

Could it be related to one of the CSS changes https://jupyterlab.readthedocs.io/en/latest/extension/extension_migration.html#css-styling ?

Certainly possible! Thanks for sharing that reference, I'll take a look now.

[dlqqq]

Yes, it looks like the new JL 4.3.0 selectors have a higher specificity, and we need to nest our existing CSS selectors within .jp-ThemedContainer for them to override JupyterLab's default.