diff --git a/packages/jupyter-ai/src/components/chat.tsx b/packages/jupyter-ai/src/components/chat.tsx index 20c4b9a94..d55b1a5ce 100644 --- a/packages/jupyter-ai/src/components/chat.tsx +++ b/packages/jupyter-ai/src/components/chat.tsx @@ -233,6 +233,9 @@ export function Chat(props: ChatProps): JSX.Element { =4.3.0. + // See: https://jupyterlab.readthedocs.io/en/latest/extension/extension_migration.html#css-styling + className="jp-ThemedContainer" // root box should not include padding as it offsets the vertical // scrollbar to the left sx={{ diff --git a/packages/jupyter-ai/style/rendermime-markdown.css b/packages/jupyter-ai/style/rendermime-markdown.css index 7e93882a5..2ced17227 100644 --- a/packages/jupyter-ai/style/rendermime-markdown.css +++ b/packages/jupyter-ai/style/rendermime-markdown.css @@ -1,8 +1,17 @@ -.jp-ai-rendermime-markdown .jp-RenderedHTMLCommon { +/* + * + * Selectors must be nested in `.jp-ThemedContainer` to have a higher + * specificity than selectors in rules provided by JupyterLab. + * + * See: https://jupyterlab.readthedocs.io/en/latest/extension/extension_migration.html#css-styling + * See also: https://github.com/jupyterlab/jupyter-ai/issues/1090 + */ + +.jp-ThemedContainer .jp-ai-rendermime-markdown .jp-RenderedHTMLCommon { padding-right: 0; } -.jp-ai-rendermime-markdown pre { +.jp-ThemedContainer .jp-ai-rendermime-markdown pre { background-color: var(--jp-cell-editor-background); overflow-x: auto; white-space: pre; @@ -11,12 +20,12 @@ border: var(--jp-border-width) solid var(--jp-cell-editor-border-color); } -.jp-ai-rendermime-markdown pre > code { +.jp-ThemedContainer .jp-ai-rendermime-markdown pre > code { background-color: inherit; overflow-x: inherit; white-space: inherit; } -.jp-ai-rendermime-markdown mjx-container { +.jp-ThemedContainer .jp-ai-rendermime-markdown mjx-container { font-size: 119%; }