fix console styling (#800)

* fix some of the more egregious styling issues in the console

* fix more stuff

Author: Rich-Harris

packages/repl/src/lib/Output/console/Console.svelte

@@ -37,8 +37,10 @@
 		--warning-border: rgb(242, 232, 163);
 		--json-tree-string-color: var(--shiki-token-string);
 		--json-tree-font-family: var(--sk-font-family-mono);
+		--json-tree-font-size: 1.2rem;
+		--json-tree-li-line-height: 1.5;
 
-		:global(.dark) & {
+		:root.dark & {
 			--error-fg: rgb(235, 78, 109);
 			--error-bg: rgb(71, 48, 54);
 			--error-border: rgb(109, 65, 76);
@@ -59,5 +61,15 @@
 			--json-tree-operator-color: #e8eaed;
 			--json-tree-regex-color: #6cd1c7;
 		}
+
+		:global {
+			p,
+			ol,
+			ul {
+				font: var(--json-tree-font-family);
+				font-size: var(--json-tree-font-size);
+				line-height: 1.5;
+			}
+		}
 	}
 </style>

packages/repl/src/lib/Output/console/ConsoleLine.svelte

@@ -202,7 +202,7 @@
 		gap: 1rem;
 		width: 100%;
 		font-size: 1.2rem;
-		align-items: center;
+		align-items: start;
 	}
 
 	.log.expandable {
@@ -221,6 +221,7 @@
 		font-size: 1.2rem;
 		margin: 0 1rem 0.4rem calc(1em + var(--indent));
 		overflow: hidden;
+		line-height: 1.5;
 
 		.location {
 			position: relative;
@@ -271,11 +272,11 @@
 		font-size: 0.9rem;
 		transition: 150ms;
 		transform-origin: 50% 50%;
-		transform: translateY(-1px);
+		transform: translateY(2px);
 	}
 
 	.arrow.expand {
-		transform: translateY(0px) rotateZ(90deg);
+		transform: translateY(2px) rotateZ(90deg);
 	}
 
 	.styled {