Fix rendering of code blocks in JupyterLab 4.3.0+ (#1104)

* fix rendering of code blocks in JupyterLab >=4.3.0

* add jp-ThemedContainer to root element

* dedupe style rules

* pre-commit

packages/jupyter-ai/src/components/chat.tsx

@@ -233,6 +233,9 @@ export function Chat(props: ChatProps): JSX.Element {
             <TelemetryContextProvider telemetryHandler={props.telemetryHandler}>
               <UserContextProvider userManager={props.userManager}>
                 <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={{

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%;
 }