strelok011

.heatmap-wrapper - добавь в стиль атрибут pointer-events: none;

Основная проблема - ререндер компонента с промежуточной обработкой значения реактом.
Это не ошибка а ожидаемое поведение реакта, он теряет позицию курсора.
Можно посмотреть к примеру здесь как разработчики борются с таким поведением.
Общая идея - обрабатывать в onChange еще и положение курсора, сохранять его в стейте и использовать при ререндере.

А еще можно в стиле написать font-family: monospace;
В этом случае пользователь в любом случае увидит моноширинный шрифт, причем тот, который установлен у него в системе.

ругается на наличие в строке
--ms-grid-column [2]. уберите эту конструкцию или перепишите по правилам

Не нужно ничего вычислять. Ее нужно просто запросить. Это свойство clientHeight

Создаете массив колонок, пробегаете по нему, собираете высоту, ищете первую минимальную, втыкаете туда блок статьи, повторяете пока не кончатся блоки для вставки.

Дополню немного куратора - ваше меню должно решать ВАШУ проблему.
Всякие образцы в интернете - могут решать а могут и не полностью. Работает ли адаптив для разных разрешений, поддерживается ли тач, сколько уровней вложенности, нужно ли скрывать скролл для длинных списков (и всё же меню - это именно список), нужно ли скрывать подменять десктопное меню на мобильное...
Когда составите список требований - тогда и только тогда нужно будет подбирать конкретную реализацию, либо опираясь на примеры пилить своё.
Халтура - она не универсальная :)

Нельзя использовать нестандартные шрифты. Только в виде растра.
1. внедрять нельзя
2. делать внешние ссылки на шрифт плохая идея, если письмо попадает в корпоративную почту, внутри изолированной сети доступа к внешнему хранилищу не будет, так же нужно учитывать, что корпоративные почтовые сервера могут с легкостью выкашивать всё подозрительное из писем, включая ссылки на внешние ресурсы. Так, к примеру, ведет себя gmail.
Гуглите "безопасные шрифты" для использования в рассылках

это вопрос 10-летия на js )
Я надеюсь, что клики по элементу массива и прочую мелочь вы написать сможете.

Берем массив, хотим изменить последовательность двух элементов
вариант со старым js

var b = list[y];
list[y] = list[x];
list[x] = b;

b - временная переменная

вариант на es6
к примеру массив arr = [1,2,3,4]
[arr[0], arr[1]] = [arr[1], arr[0]];
будет массив [2,1,3,4]
это destructuring assignment.

А так-то да, заказывайте на фрилансе :)

А еще она напоминает... комбобокс, список объединенный с инпутом, с автокомплитом и т.п.
Смотреть можно сюда, либо на различные вариации. Реализация обычно на js, требует некоторой прокачки скиллов

При создании анимаций необходимо избегать изменений цсс свойств, ведущих к перерисовке лейаута. Вот тут есть перечень всех свойств, вас должны интересовать помеченные фиолетовым.
Анимация без тормозов для смещения блока будет если вместо изменения положения на экране вида bottom: 0, bottom: 200 использовать transition: transform
Так же рекомендуется добавлять
transform: translate3d(0, 0, 0);
- заставляет некоторые устройства запускать аппаратное ускорение.

Можно тут посмотреть. Видео - не наш выбор

Для начала - почему вы считаете что высота блока не равна высоте родителя? судя по картинкам (жаль что нет в песочнице кода) он таки равен высоте родителя при установке height = 100%. Вы упускаете момент что в родителе находятся два дива, а не один, и у первого уже есть своя высота! в сумме два блока будут равны 100% + высота первого блока. Только и всего.
Если вы желаете заполнение фиксированного по высоте родителя вложенными блоками, можно обратиться к флексам.
у родителя будет display: flex; flex-direction: column; height:...
у второго дива, который вы хотите дотянуть до края - flex-grow: 1;
Другое дело - зачем?
В данном эпизоде я вижу больше проблем в верстке текста с кнопкой.
Тут вернее было бы у родителя заменить высоту на минимальную высоту, чтобы не обрезать наполняющий контент, разобраться с контентом второго дива, просто задать обертку вокруг текста дивом без фиксации высоты, добавить маржин снизу и следом разместить кнопку.

Аналитику в конец. Она не должна влиять на скорость подгрузки значимых элементов и блокировать страницу для пользователя.
SVG как раз лучше в начало, при этом можно поварьировать подход - ссылку на svg-спрайт, либо прямо инлайном запилить в html и вызывать в нужное место просто по id. Если у вас 10 ссылок на декоративные элементы - это плохой подход. На старых http серверах каждый запрос является высоконагруженной операцией для сервера.
Основной js - тоже в конец документа, в самый низ либо подключать асинхронно. Инициализация на документ онлоад.
Суть такого подхода - чем раньше пользователь увидит контент, тем спокойнее он будет и какой-нить гугл спидрейнч вам покажет влияние на первое отображение контента пользователю.
На истину не претендую, рекомендую всё же такой подход и проверку внесенных изменений у гугла.

В парадигме scss вся эта ерунда может реализоваться миксом на уровне scss, а не на уровне микс-классов. Не стоит упарываться по идеологии.
Если вам важна цель - не надо перегружать разметку такими мусорными классами.

Можно посмотреть сюда

Потому что

<div class="support__unification element-animation element-show">
                    <div class="support__buttons">
                        <a class="support__button support__button_1 support__button_active">Финансам</a>
                        <a class="support__button support__button_2">Интеграции</a>
                        <a class="support__button support__button_3">Безопасности</a>
                    </div>
                    <div class="support__images">
                        <div class="support__image_1 support__image_active"></div>
                        <div class="support__image_2"></div>
                        <div class="support__image_3"></div>
                    </div>
                </div>

изображение с классом support__image_1 support__image_active имеет абсолютное позиционирование, в результате при уменьшении ширины окна браузера получаем паразитный выступ за пределы контента.

Верстка нехорошая, но в вашем конкретном случае поможет добавление в класс .medium-container атрибута overflow: hidden;
Это костыль, по хорошему верстку надо переделывать, но тут это поможет от лишней прокрутки.

Советую по этому поводу посмотреть на фреймворк next.js и примеры реализаций на нем проектов
Вот тут общая информация о csr/ssr а тут примерчик на нексте