fix overflowing gutter and dark mode base color (gradio-app#4051)

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Upcoming Release
 
+## Bug Fixes
+
+- Code component visual updates by [@pngwn](https://github.com/pngwn) in [PR 4051](https://github.com/gradio-app/gradio/pull/4051)
+
 ## New Features:
 
 - Add support for `visual-question-answering`, `document-question-answering`, and `image-to-text` using `gr.Interface.load("models/...")` and `gr.Interface.from_pipeline` by [@osanseviero](https://github.com/osanseviero) in [PR 3887](https://github.com/gradio-app/gradio/pull/3887)
@@ -8,7 +12,7 @@
 
 - Fixes issue with `matplotlib` not rendering correctly if the backend was not set to `Agg` by [@abidlabs](https://github.com/abidlabs) in [PR 4029](https://github.com/gradio-app/gradio/pull/4029)
 - Fixes bug where rendering the same `gr.State` across different Interfaces/Blocks within
-a larger Blocks would not work by [@abidlabs](https://github.com/abidlabs) in [PR 4030](https://github.com/gradio-app/gradio/pull/4030)
+  a larger Blocks would not work by [@abidlabs](https://github.com/abidlabs) in [PR 4030](https://github.com/gradio-app/gradio/pull/4030)
 
 ## Documentation Changes:
 
@@ -30,7 +34,6 @@ No changes to highlight.
 
 No changes to highlight.
 
-
 # 3.28.1
 
 ## New Features:
@@ -103,8 +106,7 @@ No changes to highlight.
 - Add DESCRIPTION.md to image_segmentation demo by [@aliabd](https://github.com/aliabd) in [PR 3866](https://github.com/gradio-app/gradio/pull/3866)
 - Fix error in running `gr.themes.builder()` by [@deepkyu](https://github.com/deepkyu) in [PR 3869](https://github.com/gradio-app/gradio/pull/3869)
 - Fixed a JavaScript TypeError when loading custom JS with `_js` and setting `outputs` to `None` in `gradio.Blocks()` by [@DavG25](https://github.com/DavG25) in [PR 3883](https://github.com/gradio-app/gradio/pull/3883)
-- Fixed bg_background_fill theme property to expand to whole background, block_radius to affect form elements as well, and added block_label_shadow theme property  by [@aliabid94](https://github.com/aliabid94) in [PR 3590](https://github.com/gradio-app/gradio/pull/3590)
-
+- Fixed bg_background_fill theme property to expand to whole background, block_radius to affect form elements as well, and added block_label_shadow theme property by [@aliabid94](https://github.com/aliabid94) in [PR 3590](https://github.com/gradio-app/gradio/pull/3590)
 
 ## Contributors Shoutout:
 

js/code/interactive/Code.svelte

@@ -132,7 +132,7 @@
 		".cm-content": {
 			paddingTop: "5px",
 			paddingBottom: "5px",
-
+			color: "var(--body-text-color)",
 			fontFamily: "var(--font-mono)",
 			minHeight: "100%"
 		},
@@ -144,6 +144,12 @@
 		},
 		".cm-focused": {
 			outline: "none"
+		},
+		".cm-scroller": {
+			height: "auto"
+		},
+		".cm-cursor": {
+			borderLeftColor: "var(--body-text-color)"
 		}
 	});