fix: have json tree use the same font as editor

brettkolodny · brettkolodny · commit 02f2283ae59a · 2025-06-02T21:29:12.000Z
diff --git a/src/Preview.tsx b/src/Preview.tsx
@@ -388,7 +388,7 @@ const Debugger: FC<DebuggerProps> = ({ output }) => {
 			className="h-full w-full bg-surface-primary"
 		>
 			<ResizablePanel className="flex">
-				<div className="h-full w-full overflow-scroll break-all p-4">
+				<div className="h-full w-full overflow-scroll break-all p-4 text-sm font-mono">
 					<ReactJsonView
 						src={output ?? {}}
 						collapsed={1}
diff --git a/src/index.css b/src/index.css
@@ -133,6 +133,7 @@
 /* Styles for the JSON viewer */
 
 .react-json-view {
+  font-family: "DM Mono", monospace !important;
   background: hsl(var(--surface-primary)) !important;
 }
 
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -10,7 +10,7 @@ module.exports = {
 		extend: {
 			fontFamily: {
 				sans: `"Inter Variable", system-ui, sans-serif`,
-				mono: `"DM Mono", system-mono, monospace`,
+				mono: `"DM Mono", monospace`,
 			},
 			size: {
 				"icon-lg": "1.5rem",

Original file line number	Diff line number	Diff line change
`@@ -388,7 +388,7 @@ const Debugger: FC<DebuggerProps> = ({ output }) => {`
`388`	`388`	`className="h-full w-full bg-surface-primary"`
`389`	`389`	`>`
`390`	`390`	`<ResizablePanel className="flex">`
`391`		`- <div className="h-full w-full overflow-scroll break-all p-4">`
	`391`	`+ <div className="h-full w-full overflow-scroll break-all p-4 text-sm font-mono">`
`392`	`392`	`<ReactJsonView`
`393`	`393`	`src={output ?? {}}`
`394`	`394`	`collapsed={1}`
Original file line number	Diff line number	Diff line change
`@@ -133,6 +133,7 @@`
`133`	`133`	`/* Styles for the JSON viewer */`
`134`	`134`
`135`	`135`	`.react-json-view {`
	`136`	`+ font-family: "DM Mono", monospace !important;`
`136`	`137`	`background: hsl(var(--surface-primary)) !important;`
`137`	`138`	`}`
`138`	`139`