Александр

У Вас перекрывается блок со всем попапом блоком со свайпером. Выносите отображение попапа в другой элемент, который будет поверх всех (например в body). В этом может помочь либа для работы с тултипами, например floating-ui. Ну и никогда по ховеру такое не показывайте, только по клику.

А чтобы в HTML на тэге увидеть жмёте ПКМ - Edit as HTML

Добавляете родителю, который обрамляет ссылку и иконку position: relative, а ссылке добавляете

a::after {
 position: absolute;
 inset: 0;
 content: '';
}

Как минимум не хватает position у modal, ну и, видимо, воспроизведения. Посмотрите сюда ещё: ::backdrop.

Это просто контейнер, в котором Ваш контент страницы. И в этом же контейнере позиционируете шапку и правый нижний блок. Причем, без position: fixed можно обойтись.

Без библиотек можно и так сделать:

const input = document.querySelector('input');

input.addEventListener('input', (event) => {
  const value = event.target.value
    .replace(/^\+?[78]/, '')
    .replace(/[^0-9]/g, '')
    .slice(0, 10);
  
  event.target.value = value;
});

Я бы использовал imask.js в данном случае:

IMask(document.querySelector('input'), { mask: '000 000 00 00' });

1. Добавляйте атрибут на document.documentElement.
2. Добавляйте более осмысленный атрибут, например: data-theme="dark"
3. После добавления атрибута сохраняйте его в localStorage:

localStorage.setItem('theme', isChecked ? 'dark' : 'light');

4. В разделе head добавляйте скрипт, который применит атрибут:

const theme = localStorage.getItem('theme');
if (mode === 'dark') {
  document.documentElement.dataset.theme = 'dark';
}

Ещё можете почитать про prefers-color-scheme.

Так попробуйте.

- <Row gutter={[20, 21]}>
+ <Row align="stretch" gutter={[20, 21]}>

Разбейте на несколько гридов и используйте высоту в самих блоках.

<div className="reference-container">
  <div className="reference-container-panel">
    {isToolsVisible && <div className="tools"></div>}
    {isSeracpPanleVisible && <div className="searchPanel"</div>}
  </div>
  <div className="mainContent"></div>
</div>

.reference-container {
  height: 100%;
  display: grid;
  grid-template-rows: max-content 1fr;
}

.reference-container-panel {
  display: grid;
  grid-auto-rows: max-content;
}

.reference-container-panel:empty {
  display: none;
}

.tools {
  height: 100px;
}

.searchPanel {
  height: 50px;
}

Попробуйте filter: drop-shadow(2px 4px 6px blue); заменить на box-shadow: 2px 4px 6px blue;. И можете добавить will-change: height;.