Use same editor bg

BrunoQuaresma · BrunoQuaresma · commit 98aa0544c067 · 2024-02-05T17:35:41.000Z
diff --git a/site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx b/site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx
@@ -2,6 +2,7 @@ import { type ComponentProps, type FC } from "react";
 import Editor, { DiffEditor, loader } from "@monaco-editor/react";
 import * as monaco from "monaco-editor";
 import { useCoderTheme } from "./coderTheme";
+import { useTheme } from "@emotion/react";
 
 loader.config({ monaco });
 
@@ -20,6 +21,7 @@ export const SyntaxHighlighter: FC<SyntaxHighlighterProps> = ({
   editorProps,
 }) => {
   const hasDiff = compareWith && value !== compareWith;
+  const theme = useTheme();
   const coderTheme = useCoderTheme();
   const commonProps = {
     language,
@@ -45,6 +47,7 @@ export const SyntaxHighlighter: FC<SyntaxHighlighterProps> = ({
       css={{
         padding: "8px 0",
         height: "100%",
+        backgroundColor: theme.monaco.colors["editor.background"],
       }}
     >
       {hasDiff ? (
diff --git a/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx b/site/src/modules/templates/TemplateFiles/TemplateFiles.tsx
@@ -185,6 +185,7 @@ const styles = {
   filePanel: (theme) => ({
     borderRadius: 8,
     border: `1px solid ${theme.palette.divider}`,
+    overflow: "hidden",
   }),
 
   fileHeader: (theme) => ({
