fix(editor): align selection highlight — integer line-height

The editor overlays a <textarea> on a highlight <pre>. With a fractional line
box (line-height 1.7 * 13px = 22.1px) the textarea's internal text layout and
the block <pre> rounded lines differently, so the native selection drifted
upward from the painted glyphs, growing with line number (visible by ~line 37).

Use an integer px line-height (22px) on .sql-editor so both lay out lines
identically before `zoom: 1.2` scales them together, and match .sql-gutter > div
height so the line numbers stay row-aligned. Verified in-browser: selection on a
deep line now brackets the glyphs exactly.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QennTvGKAtJZrv9EpQagef

Author: 2 people

src/styles.css

@@ -532,7 +532,12 @@ body {
   position: relative;
   display: flex; width: 100%; height: 100%;
   font-family: var(--mono);
-  font-size: 13px; line-height: 1.7;
+  /* Integer px line-height (not unitless): the editor overlays a <textarea> on a
+     highlight <pre>, and a fractional line box (1.7 * 13px = 22.1px) was rounded
+     differently by the textarea's internal layout vs the block <pre>, so the
+     native selection drifted upward from the painted glyphs, growing with line
+     number. An integer line-height makes both lay out identically. */
+  font-size: 13px; line-height: 22px;
   background: var(--bg-editor); color: var(--fg);
   overflow: hidden;
 }
@@ -546,7 +551,7 @@ body {
   overflow: hidden;
   font-variant-numeric: tabular-nums;
 }
-.sql-gutter > div { height: 1.7em; }
+.sql-gutter > div { height: 22px; }
 .sql-area { position: relative; flex: 1; overflow: hidden; }
 .sql-pre {
   position: absolute; inset: 0; margin: 0;