From 189d54baefb7260a44d46817a22ea3c121dac572 Mon Sep 17 00:00:00 2001 From: "David L. Qiu" Date: Mon, 11 Nov 2024 16:14:27 -0800 Subject: [PATCH 1/4] 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%; +} From 4e3047c913db77469eb10ae3c64529f737f27885 Mon Sep 17 00:00:00 2001 From: "David L. Qiu" Date: Tue, 12 Nov 2024 10:27:34 -0800 Subject: [PATCH 2/4] add jp-ThemedContainer to root element --- packages/jupyter-ai/src/components/chat.tsx | 3 +++ 1 file changed, 3 insertions(+) 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={{ From cb747887c1a0773d93581e217e8e30c33ea2d5e7 Mon Sep 17 00:00:00 2001 From: "David L. Qiu" Date: Tue, 12 Nov 2024 10:27:40 -0800 Subject: [PATCH 3/4] dedupe style rules --- .../jupyter-ai/style/rendermime-markdown.css | 36 ------------------- 1 file changed, 36 deletions(-) diff --git a/packages/jupyter-ai/style/rendermime-markdown.css b/packages/jupyter-ai/style/rendermime-markdown.css index bdf375bff..177bfbe2c 100644 --- a/packages/jupyter-ai/style/rendermime-markdown.css +++ b/packages/jupyter-ai/style/rendermime-markdown.css @@ -1,38 +1,4 @@ -/* ************************************** */ - -/* - * Styles below are for JupyterLab >=4.0.0,<4.3.0. - */ - -/* ************************************** */ - -.jp-ai-rendermime-markdown .jp-RenderedHTMLCommon { - padding-right: 0; -} - -.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-ai-rendermime-markdown pre > code { - background-color: inherit; - overflow-x: inherit; - white-space: inherit; -} - -.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. @@ -41,8 +7,6 @@ * See also: https://github.com/jupyterlab/jupyter-ai/issues/1090 */ -/* ************************************** */ - .jp-ThemedContainer .jp-ai-rendermime-markdown .jp-RenderedHTMLCommon { padding-right: 0; } From 30454da60f61ac859f4887feb2cc4e1f31e4fc32 Mon Sep 17 00:00:00 2001 From: "David L. Qiu" Date: Tue, 12 Nov 2024 10:28:53 -0800 Subject: [PATCH 4/4] pre-commit --- packages/jupyter-ai/style/rendermime-markdown.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/jupyter-ai/style/rendermime-markdown.css b/packages/jupyter-ai/style/rendermime-markdown.css index 177bfbe2c..2ced17227 100644 --- a/packages/jupyter-ai/style/rendermime-markdown.css +++ b/packages/jupyter-ai/style/rendermime-markdown.css @@ -2,7 +2,7 @@ * * 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 */