Мінікарта: ширші символи й тьмяніша палітра

Дві причини мазанини, і обидві не там, де я спершу шукав.

ШИРИНА. 280 символів рядка тиснулись у 180 пікселів — 0.64 пікселя на
символ. Проміжок між словами виходив менший за піксель і зникав при
округленні, тож рядки ставали суцільними рисами. Тепер 120 символів:
1.4 пікселя на символ, проміжок тримається цілим пікселем. Хвости
довгих рядків на карту не потрапляють — для мережевих конфігів це
майже нічого не коштує, бо відступ і ключове слово стоять на початку.

ЯСКРАВІСТЬ. На майже чорному тлі світло-сірий штрих читається як
жирний навіть в один піксель: око бачить не товщину, а контраст. Саме
тому попереднє зменшення висоти штриха мазанини не прибрало.
Палітра на крок тьмяніша, різниця між видами рядків збережена.

web/src/components/Minimap.tsx

@@ -105,8 +105,25 @@ const BAR_PX = 1
 /** Ширина колонки позначок по всьому документу (режим прокрутки). */
 const GUTTER_W = 6
 
-/** Скільки символів рядка вміщається в ширину смужки. Далі — обрізаємо. */
+/**
-const MAX_COLS = 280
+ * Скільки символів рядка вміщається в ширину смужки. Далі — обрізаємо.
+ *
+ * Було 280, і саме це робило мінікарту мазаниною. Порахуймо: 280
+ * символів у 180 пікселів — це 0.64 пікселя на символ. Слово з чотирьох
+ * літер займає два з половиною пікселі, проміжок між словами — менше
+ * одного, тобто зникає при округленні. Рядки перетворювались на суцільні
+ * риси, і мінікарта показувала не форму конфігу, а сіру штриховку.
+ *
+ * 120 дає 1.4 пікселя на символ: проміжок між словами тримається цілим
+ * пікселем і не губиться. Слова знову видно окремо — а саме за ними
+ * людина й упізнає, де вона в конфізі.
+ *
+ * Втрата: хвости довгих рядків за 120-м символом на карту не потрапляють.
+ * Для мережевих конфігів це майже нічого не коштує — відступ і ключове
+ * слово, тобто вся структура, стоять на початку рядка. Хвіст із адресами
+ * й масками однаково не читався б і при 280.
+ */
+const MAX_COLS = 120
 
 /**
  * Скільки слів у рядку малюємо окремо.
@@ -191,10 +208,22 @@ export const KIND_COMMENT = 3
 /** Колір знайденого рядка. Той самий бурштин, що й у підсвітці тексту. */
 const HIT_COLOR = '#fbbf24'
 
+/*
+ * Палітра на крок тьмяніша, ніж була (#e2e8f0 / #94a3b8 / #64748b).
+ *
+ * На майже чорному тлі світло-сірий штрих читається як ЖИРНИЙ, навіть
+ * коли він в один піксель: око бачить не товщину, а контраст. Саме
+ * тому зменшення висоти штриха мазанини не прибрало — вона була не в
+ * товщині.
+ *
+ * Різниця між видами рядків при цьому зберігається: три кольори так
+ * само розрізняються між собою, просто вся мініатюра стала спокійнішою
+ * і перестала перетягувати увагу з тексту, який поруч.
+ */
 export const KIND_COLOR: Record<number, string> = {
-  [KIND_TOP]: '#e2e8f0',
+  [KIND_TOP]: '#94a3b8',
-  [KIND_BODY]: '#94a3b8',
+  [KIND_BODY]: '#64748b',
-  [KIND_COMMENT]: '#64748b',
+  [KIND_COMMENT]: '#475569',
 }
 
 /**