Андрей Мартынкевич

Можно так:

Добавив следующую строку: document.body.style.overflow = 'hidden';
А при закрытии устанавливать overflow = 'visible'

Ещё можно обрезать текст и добавить многоточие.
Пример:

.example{
    width: 150px; /* Текст длиннее данной ширины будет обрезан */
    white-space: nowrap; /* Текст не переносится */
    overflow: hidden; /* Обрезаем всё за пределами блока */
    text-overflow: ellipsis;
}

1. Я бы создал массив для расписания(Например: let timetable = []) в котором бы находились объекты со свойствами
day,time,text и тд. Т.к сейчас там невозможно понять какая информация относится к какому расписанию.
2. Для того чтобы получить значение option, можно написать следующие
JS code:

let select = document.querySelector('#select');
select.addEventListener('change',(e)=>{
console.log(select.value);
})

Для этого нужно каждому option прописать атрибут value с нужным значением.
HTML code:

<select id="select">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

Кто мешает сделать это с помощью тернарного оператора?
Пример: w/8.347 > 200 ? w/8.347 : (Значение которое будет если w/8.347 будет меньше 200).

укажите

img{
   display:block
}

document.getElementsByClassName('calculator-block-btn')[0].addEventListener('click', calculateThis);

function calculateThis() {
  let inputs = document.querySelectorAll('.calculator-value');
  let height = Number(document.getElementById('height').value);
  let heightValue = Number(height);

  let width = Number(document.getElementById('width').value);
  let widthValue = Number(width);

  let length = Number(document.getElementById('length').value);
  let lengthValue = Number(length);

  let amount = (document.getElementById('amount').value);
  let amountValue = Number(amount);

  let wordsResult = '  шт. бруса';
  let wordsSurfaceArea = ' общая площадь, шт';


  inputs.forEach((el) => {
    if (!el.value) el.classList.add('empty');
    else {
      el.classList.remove('empty');
    }
  })

  function payment() {
    return (1 / ((widthValue * heightValue * lengthValue) / 1000000000)) * amountValue;
  }

  function surfaceArea() {
    return ((heightValue * widthValue * 2) + (heightValue * lengthValue * 2) + (widthValue * lengthValue * 2)) / 1000000;
  }

  document.getElementById('result').innerHTML = (payment()).toFixed(3) + wordsResult;
  document.getElementById('surface-area').innerHTML = (surfaceArea()).toFixed(1) + wordsSurfaceArea;

}

А для того, чтобы не выводилось Nan и 0 можете указать начальное значение или выйти из функции calculateThis проверив имеется ли у кого-то класс empty

Попробуйте указать flex-shrink: 0

Вот, может Вам подойдет

Почему бы не задать не в процентах, а в частях?(fr).

Ну для того чтобы понять нужно создавать блок или элемент давайте узнаем что из себя представляет блок и элемент(*ссылочка на источник*). Блок - это компонент страницы, который может быть повторно использован. Элемент - это составная часть блока, которая не может использоваться в отрыве от него. В вашем случае вы используете блок works-item, конечно можно создавать новые блоки(works-box и works-img) Вам никто не запретит, но зачем? Если стили для ссылки и картинки уникальны внутри блока works-item, то лучше использовать элемент. Если стили где-то ранее использовались или будут использоватся, то лучше создать блок для повторного использования в дальнейшем.

Добавьте огромный z-index для попапа. Например: z-index: 9999.

Вот Вам примерчик

Зедсь расстояние между элементами 30px(15px слева и справа и по вертикали аналогично) по горизонтали и вертикали, но можно указать любые. Отрицательный margin у row указан для того, чтобы компенсировать отступы.

Можно так