From bb3e17c0fa7bab2ca8d0b4464761dc2f5b374a09 Mon Sep 17 00:00:00 2001
From: Enrico Ros <enrico.ros@gmail.com>
Date: Tue, 18 Jun 2024 11:31:49 -0700
Subject: [PATCH] Cleanups

---
 src/modules/blocks/code/RenderCode.tsx | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/modules/blocks/code/RenderCode.tsx b/src/modules/blocks/code/RenderCode.tsx
index 265b56615..8bccce6b4 100644
--- a/src/modules/blocks/code/RenderCode.tsx
+++ b/src/modules/blocks/code/RenderCode.tsx
@@ -177,19 +177,23 @@ function RenderCodeImpl(props: RenderCodeImplProps) {
         component='code'
         className={`language-${inferredCodeLanguage || 'unknown'}`}
         sx={{
-          whiteSpace: softWrap ? 'break-spaces' : 'pre', // was 'break-spaces' before we implemented per-block scrolling
-          mx: 0,
-          p: (renderHTML && !showBlockTitle) ? 0 : 1.5, // this block gets a thicker border (but we zoom html in a special no-title case)
+          p: (renderHTML && !showBlockTitle) ? 0 : 1.5, // this block gets a thicker border (but we 'fullscreen' html in case there's no title)
+          overflowX: 'auto', // ensure per-block x-scrolling
+          whiteSpace: softWrap ? 'break-spaces' : 'pre',
+
+          // layout
           display: 'flex',
           flexDirection: 'column',
           // justifyContent: (renderMermaid || renderPlantUML) ? 'center' : undefined,
-          overflowX: 'auto',
-          '&:hover > .overlay-buttons': { opacity: 1 },
-          ...(props.sx || {}),
+
           // fix for SVG diagrams over dark mode: https://github.com/enricoros/big-AGI/issues/520
-          '[data-joy-color-scheme="dark"] &': (renderPlantUML || renderMermaid) ? {
-            backgroundColor: 'neutral.300',
-          } : {},
+          '[data-joy-color-scheme="dark"] &': (renderPlantUML || renderMermaid) ? { backgroundColor: 'neutral.400' } : {},
+
+          // fade in children buttons
+          '&:hover > .overlay-buttons': { opacity: 1 },
+
+          // lots more style, incl font, background, embossing, radius, etc.
+          ...props.sx,
         }}>
 
         {/* Markdown Title (File/Type) */}