diff --git a/web/src/components/ConfigViewer.tsx b/web/src/components/ConfigViewer.tsx index 31df0fe..0b3717d 100644 --- a/web/src/components/ConfigViewer.tsx +++ b/web/src/components/ConfigViewer.tsx @@ -21,12 +21,24 @@ import { Minimap, buildShape } from './Minimap' * панель версій, і шапку. */ -/** Висота рядка коду. Мусить збігатися з leading-5 у розмітці. */ -export const ROW_H = 20 +/** Висота рядка коду. Мусить збігатися з leading-[22px] у розмітці. */ +export const ROW_H = 22 /** Шрифт коду. Один рядок на всі три місця, де він потрібен, — щоб - * вимірювання ширини символа не розійшлося з тим, що намальовано. */ -export const CODE_FONT = 'font-mono text-[12px] leading-5' + * вимірювання ширини символа не розійшлося з тим, що намальовано. + * + * Було `text-[12px] leading-5` (20 px на рядок) — і на конфігах, де + * рядки довгі та схожі один на одного, це зливалось у сіру масу. + * Причина не в кольорі: світлий текст на майже чорному тлі Windows + * малює помітно товщим, ніж є, а типове лікування + * (-webkit-font-smoothing) там не працює взагалі — воно лише для macOS. + * + * Тому додано те, що на Windows справді діє: більше повітря. Рядок + * 22 px замість 20, і невеликий міжлітерний просвіт — символи + * перестають чіплятись один за одного. Розмір лишився 12 px: на + * 33 тисячах рядків ZTE кожен зайвий піксель висоти — це ще один + * екран прокрутки. */ +export const CODE_FONT = 'font-mono text-[12px] leading-[22px] tracking-[0.02em]' /** Останній рядок, що починається не нижче за y. */ export function rowAt(offsets: Int32Array, y: number): number {