Fix rendering of code blocks in JupyterLab>= 4.3.0 (#111)

* fix rendering of code blocks in JupyterLab >=4.3.0 Co-authored-by: david qiu <[email protected]> * lint --------- Co-authored-by: david qiu <[email protected]>
jupyterlab · Dec 9, 2024 · a12fa00 · a12fa00
1 parent d4e6e5f
commit a12fa00
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/packages/jupyter-chat/src/components/chat.tsx b/packages/jupyter-chat/src/components/chat.tsx
@@ -54,6 +54,9 @@ export function Chat(props: Chat.IOptions): JSX.Element {
   return (
     <JlThemeProvider themeManager={props.themeManager ?? null}>
       <Box
+        // Add .jp-ThemedContainer for CSS compatibility in both JL <4.3.0 and >=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-chat/style/chat.css b/packages/jupyter-chat/style/chat.css
@@ -18,11 +18,19 @@
   position: relative;
 }
 
-.jp-chat-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-chat-rendermime-markdown .jp-RenderedHTMLCommon {
   padding-right: 0;
 }
 
-.jp-chat-rendermime-markdown pre {
+.jp-ThemedContainer .jp-chat-rendermime-markdown pre {
   background-color: var(--jp-cell-editor-background);
   overflow-x: auto;
   white-space: pre;
@@ -31,13 +39,13 @@
   border: var(--jp-border-width) solid var(--jp-cell-editor-border-color);
 }
 
-.jp-chat-rendermime-markdown pre > code {
+.jp-ThemedContainer .jp-chat-rendermime-markdown pre > code {
   background-color: inherit;
   overflow-x: inherit;
   white-space: inherit;
 }
 
-.jp-chat-rendermime-markdown mjx-container {
+.jp-ThemedContainer .jp-chat-rendermime-markdown mjx-container {
   font-size: 119%;
 }