fix overflowing gutter and dark mode base color (#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)
@@ -30,7 +34,6 @@ No changes to highlight.
 
 No changes to highlight.
 
-
 # 3.28.1
 
 ## New Features:
@@ -105,7 +108,6 @@ No changes to highlight.
 - 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)
 
-
 ## Contributors Shoutout:
 
 No changes to highlight.

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)"
 		}
 	});