From 189d54baefb7260a44d46817a22ea3c121dac572 Mon Sep 17 00:00:00 2001
From: "David L. Qiu" <david@qiu.dev>
Date: Mon, 11 Nov 2024 16:14:27 -0800
Subject: [PATCH] fix rendering of code blocks in JupyterLab >=4.3.0

---
 .../jupyter-ai/style/rendermime-markdown.css  | 45 +++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/packages/jupyter-ai/style/rendermime-markdown.css b/packages/jupyter-ai/style/rendermime-markdown.css
index 7e93882a5..bdf375bff 100644
--- a/packages/jupyter-ai/style/rendermime-markdown.css
+++ b/packages/jupyter-ai/style/rendermime-markdown.css
@@ -1,3 +1,11 @@
+/* ************************************** */
+
+/*
+ * Styles below are for JupyterLab >=4.0.0,<4.3.0.
+ */
+
+/* ************************************** */
+
 .jp-ai-rendermime-markdown .jp-RenderedHTMLCommon {
   padding-right: 0;
 }
@@ -20,3 +28,40 @@
 .jp-ai-rendermime-markdown mjx-container {
   font-size: 119%;
 }
+
+/* ************************************** */
+
+/*
+ * Styles below are for JupyterLab >=4.3.0.
+ *
+ * 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-ThemedContainer .jp-ai-rendermime-markdown pre {
+  background-color: var(--jp-cell-editor-background);
+  overflow-x: auto;
+  white-space: pre;
+  margin: 0;
+  padding: 4px 2px 0 6px;
+  border: var(--jp-border-width) solid var(--jp-cell-editor-border-color);
+}
+
+.jp-ThemedContainer .jp-ai-rendermime-markdown pre > code {
+  background-color: inherit;
+  overflow-x: inherit;
+  white-space: inherit;
+}
+
+.jp-ThemedContainer .jp-ai-rendermime-markdown mjx-container {
+  font-size: 119%;
+}