fix: align cursor in live code editor (#962)

Set explicit line-height and letter-spacing on the editor mixin so the
hidden textarea and visible pre layers stay pixel-aligned. Without
these, browsers compute different defaults per element type, causing
the cursor to drift from the rendered text.

Author: quantizor

components/LiveEdit.tsx

@@ -97,6 +97,8 @@ export const editorMixin = `
   font-family: ${monospace};
   font-size: 0.8rem;
   font-weight: 300;
+  line-height: 1.5;
+  letter-spacing: normal;
   min-height: ${rem(400)};
   overflow-x: hidden;
   overflow-y: auto !important;

test/components/__snapshots__/LiveEdit.spec.tsx.snap

@@ -21,6 +21,8 @@ exports[`LiveEdit renders correctly 1`] = `
   font-family: var(--font-mono),ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
   font-size: 0.8rem;
   font-weight: 300;
+  line-height: 1.5;
+  letter-spacing: normal;
   min-height: 22.22222222222222rem;
   overflow-x: hidden;
   overflow-y: auto!important;