style(comment): adjust highlight padding and reduce border radius

Remove the fixed horizontal padding on the mark element and replace it with a zero‑padding plus a 1 px horizontal padding/margin trick to keep intra‑word highlights snug. Reduce the border radius from 3 to 2 to match the new design.
2026-07-13 01:53:51 +03:00
parent 624e03a9e3
commit cfda79ef70
1 changed files with 8 additions and 2 deletions
@@ -115,12 +115,18 @@ function DiffLine({
            <Box
              key={i}
              component="mark"
-              px={3}
              fw={600}
              style={{
                background: markBg,
                color: markFg,
-                borderRadius: 3,
+                borderRadius: 2,
+                // Snug intra-word highlight: a hair of horizontal padding keeps
+                // the mark background slightly wider than the glyph, canceled by
+                // an equal negative margin so neighbouring letters are NOT pushed
+                // apart. The old px={3} padding made single-letter edits (е→ё,
+                // х→е) look like they had spaces around the changed character.
+                padding: "0 1px",
+                margin: "0 -1px",
                textDecoration: isDel ? "line-through" : "none",
              }}
            >