Антон Романков

Набросал пример: https://codepen.io/romant094/pen/LYgbybO

Мой совет: сделайте нормальный адаптив.
На мобилке блоки можно разместить в колонку. И будет намного лучше.
Ну и горизонтальный скролл — это моветон в 2022.

Либо Masonry использовать, либо переходить на flex.

https://alvarotrigo.com/pagePiling/examples/horizo...

Использование готового UI-Kit'a, конечно же, упрощает и ускоряет разработку. Но хочу предупредить, что у MUI есть свои особенности в некоторых местах. Может быть сложно что-то прикрутить.

В целом сложно ответить на этот вопрос словом да или нет. Зависит от потребностей.
Ответьте на вопросы:
- Готова ли компания тратить ресурсы на развитие и поддержку своего собственного UI-Kit'a?
- Что проект получит от стороннего UI-Kit'а?
- В чем преимущества своего UI-Kit'a?

Я бы делал разбиение на модули. Используя scss можно вынести в один файл общие стили и импортировать их там, где надо. Также можно задействовать миксин.
Ну а если на чистом css, то просто выносим общие стили в отдельный файл и линкуем на страницах, на которых это надо.
Что касается названия, то тут it's up to you.

С ходу вот это нашел
https://bestofreactjs.com/repo/gribnoysup-react-ya...

https://developer.mozilla.org/en-US/docs/Web/API/W...
https://developer.mozilla.org/ru/docs/Web/API/Wind...

Нужно заменить screenY на scrollY

Если я правильно понял вопрос, то вам нужен mini-css-extract-plugin, который сможет добавить hash к имени файла
https://webpack.js.org/plugins/mini-css-extract-pl...

Если я правильно понял ваш вопрос...

const inputs = document.querySelectorAll("input");

inputs.forEach((item, index) => {
  item.addEventListener("click", (e) => {
    inputs.forEach((input, idx) => {
      if (index !== idx) {
        input.setAttribute("disabled", true);
      }
    });
  });
});

.previous {
  &:hover:before {
    background-color: red;
  }
}

htmlbook.ru/practical/krugovaya-diagramma
Тут описано, как это делать

А почему бы не реализовать так, чтобы тултип уже был в нужной позиции, а управлять надо было бы только его opacity и translateX? Тогда такой проблемы не будет.

https://codepen.io/romant094/pen/mdxVaeo
вот так

Закинул ваш пример сюда, все работает.
Возможно, какая-то либа мешает...
Обратите внимание на файл filter_content.js, строка 30.

Обратите внимание на эффект частиц. Возможно от этого сможете оттолкнуться.
https://vincentgarreau.com/particles.js/

onMouseEnter => открыть меню
onClick на документе, исключая сам дропдаун => закрыть меню

С onMouseEnter, думаю, все понятно.

const menuItems = document.querySelectorAll('.menu-item')
document.addEventListener('click', (e) => {
  event.stopPropagation() // это надо, чтобы прекратить распространение события
  if (!menuItems.includes(e.target)) {
    // close dropdown
  }
})