From de9f9b312e8ab9971fc555c346730a0ef1b0b231 Mon Sep 17 00:00:00 2001
From: Xin <xin@imfing.com>
Date: Sat, 14 Sep 2024 23:53:43 +0100
Subject: [PATCH] fix: jupyter styling not applied (#454)

---
 assets/css/compiled/main.css      | 17 +++++++++++++++++
 assets/css/components/jupyter.css | 16 ++--------------
 assets/css/styles.css             |  1 +
 layouts/shortcodes/jupyter.html   |  4 ++--
 4 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index 76d980eb..72dc5f4a 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -2577,6 +2577,23 @@ nav .search-wrapper {
     grid-template-columns: repeat(var(--hextra-feature-grid-cols), minmax(0, 1fr))
 }
   }
+.hextra-jupyter-code-cell {
+  scrollbar-gutter: auto;
+  margin-top: 1.5rem;
+}
+.hextra-jupyter-code-cell .hextra-jupyter-code-cell-outputs-container {
+  overflow: hidden;
+  font-size: .75rem;
+}
+.hextra-jupyter-code-cell .hextra-jupyter-code-cell-outputs-container .hextra-jupyter-code-cell-outputs {
+  max-height: 50vh;
+  overflow: auto;
+}
+.hextra-jupyter-code-cell .hextra-jupyter-code-cell-outputs-container .hextra-jupyter-code-cell-outputs pre {
+  max-width: 100%;
+  overflow: auto;
+  font-size: .75rem;
+}
 html {
   font-size: 1rem;
   -webkit-font-smoothing: antialiased;
diff --git a/assets/css/components/jupyter.css b/assets/css/components/jupyter.css
index 4a21fb24..839fd8b9 100644
--- a/assets/css/components/jupyter.css
+++ b/assets/css/components/jupyter.css
@@ -3,27 +3,15 @@
 
   @apply hx-mt-6;
 
-  .hextra-jupyter-code-cell-source {
-    @apply hx-text-sm;
-    .chroma,
-    pre {
-      @apply hx-m-0;
-    }
-  }
-
   .hextra-jupyter-code-cell-outputs-container {
-    @apply hx-text-xs hx-overflow-hidden hx-border hx-border-t-0 hx-rounded-b-xl dark:hx-border-neutral-800;
+    @apply hx-text-xs hx-overflow-hidden;
 
     .hextra-jupyter-code-cell-outputs {
       @apply hx-overflow-auto hx-max-h-[50vh];
 
       pre {
-        @apply hx-p-4;
+        @apply hx-text-xs hx-overflow-auto hx-max-w-full;
       }
     }
   }
 }
-
-.hextra-jupyter-code-cell:has(.hextra-jupyter-code-cell-outputs) .hextra-jupyter-code-cell-source .chroma {
-  @apply hx-rounded-b-none;
-}
diff --git a/assets/css/styles.css b/assets/css/styles.css
index d75557f8..83b795f1 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -10,6 +10,7 @@
 @import "components/scrollbar.css";
 @import "components/code-copy.css";
 @import "components/hextra/feature-grid.css";
+@import "components/jupyter.css";
 
 html {
   @apply hx-text-base hx-antialiased;
diff --git a/layouts/shortcodes/jupyter.html b/layouts/shortcodes/jupyter.html
index a9f5209d..e2ff6435 100644
--- a/layouts/shortcodes/jupyter.html
+++ b/layouts/shortcodes/jupyter.html
@@ -53,12 +53,12 @@
                 {{- else if eq (index $output "output_type") "stream" -}}
                   {{- $text := index $output "text" -}}
                   {{- $textContent := (cond (reflect.IsSlice $text) (delimit $text "") $text) -}}
-                  <pre class="not-prose hx-text-sm">{{- $textContent -}}</pre>
+                  <pre class="not-prose">{{- $textContent -}}</pre>
                 {{- else if eq (index $output "output_type") "execute_result" -}}
                   {{- $data := index $output "data" -}}
                   {{- $text := index $data "text/plain" -}}
                   {{- $textContent := (cond (reflect.IsSlice $text) (delimit $text "") $text) -}}
-                  <pre class="not-prose hx-text-sm">{{- $textContent -}}</pre>
+                  <pre class="not-prose">{{- $textContent -}}</pre>
                   {{- $html := index $data "text/html" -}}
                   {{- if $html -}}
                     {{- $htmlText := delimit $html "" -}}