From 0e5a4075378b064b34caec934f8490f31646636e Mon Sep 17 00:00:00 2001
From: david qiu <david@qiu.dev>
Date: Tue, 12 Nov 2024 14:44:34 -0800
Subject: [PATCH] Backport PR #1104: Fix rendering of code blocks in JupyterLab
 4.3.0+

---
 packages/jupyter-ai/src/components/chat.tsx     |  3 +++
 .../jupyter-ai/style/rendermime-markdown.css    | 17 +++++++++++++----
 2 files changed, 16 insertions(+), 4 deletions(-)

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