Как уменьшить окно элемента `select`?

(function(){ 
  let hint   = document.getElementById('FullHint'); 
  let select = document.getElementsByClassName('select'); 
  let modal  = document.getElementsByClassName('modal-options'); 
  for( let i = 0; i < select.length; i++){ 
    /* Специально заранее добавляется value всем селектам, чтобы выбранный можно было 
    достать через select[].value, как в случае с обычными опциями*/ 
    select[i].value = ""; 
    select[i].addEventListener('click', function(){ 
      /* При клике на селект - вылетает большое окно выбора 
      и скрывается всплывающая подсказка, если она была*/ 
      modal[i].style.display = 'block'; 
      hint.classList.remove('show'); 
    }); 
    /* Кусок для всплывающего текста-подсказки, если выбран слишком длинный текст*/ 
    select[i].addEventListener('mouseenter', function(){ 
      if( this.value.length > 10 ){ 
        hint.innerText = this.value; 
        hint.classList.add('show');         
      } 
    }); 
    select[i].addEventListener('mousemove', function(e){ 
      hint.style.top = (e.pageY + 25) + 'px'; 
      hint.style.left = (e.pageX + 25) + 'px'; 
    }); 
    select[i].addEventListener('mouseleave', function(){ 
      hint.classList.remove('show'); 
    }); 
    /* конец куска подсказок */ 
     
    /* При клике на список опций (или вне списка) - окно закрывается */ 
    modal[i].addEventListener('click', function(){ 
      this.style.display = 'none'; 
    }); 
     
    /* Достаем все опции внутри текущего окна */ 
    let option = modal[i].getElementsByClassName('option'); 
    for(let u = 0; u < option.length; u++){ 
      option[u].addEventListener('click', function(){ 
        /* При клике на очередную - меняем value и innerText селекта */ 
        let text = this.innerText; 
        select[i].value = text; 
        if( text.length > 10 ){ 
          text = text.slice(0,8) + '...'; 
        } 
        select[i].innerText = text; 
      }); 
    } 
  } 
})();

* {margin: 0;} 
.select { 
  display: inline-block; 
  width: 100px; max-width: 100px; 
  border: 1px solid #9c009c; 
  overflow: hidden; 
  padding: 2px 4px; 
  box-sizing: border-box; 
  margin: 5px; 
  cursor: pointer; 
} 
.select:hover {background-color: #b2307c; color: white;} 
.select:before {content: '▼'; font-size: 12px;} 
 
.modal-options { 
  position: fixed; display: none; 
  z-index: 2147483647; /* Максимально возможный z-index; */ 
  width: 100vw; height: 100vh; 
  top: 0; 
  background-color: rgba(200,0,0,0.2); 
} 
.options { 
  width: 80%; max-width: 1200px; height: 90vh; 
  margin: 5vh auto; 
  background-color: #ffd2ff; 
  border: 1px solid #9c007c; 
  overflow: auto; 
} 
.option { 
  border-bottom: 1px solid #9c007c; 
  padding: 2px; cursor: pointer; 
} 
.option:hover {background-color: #ffeeee;} 
 
#FullHint { 
  display: none; 
  max-width: 1200px; background-color: white;  
  border: 2px solid #ec306c; 
  padding: 2px 4px; 
} 
#FullHint.show { 
  display: inline-block; 
  position: absolute; 
  margin-right: 30px; 
}

<div id="FullHint"></div><!-- Добавлен для всплывающей подсказки при наведении --> 
 
<div class="select">select...</div> 
<div class="modal-options"> 
  <div class="options"> 
    <div class="option"> 
      Писец какой длинный тект, просто нереально длинный, очень-очень длинный текст 
    </div> 
    <div class="option">Другой текст</div> 
    <div class="option">бубу</div> 
    <div class="option">куку</div> 
  </div> 
</div> 
 
<div class="select">select...</div> 
<div class="modal-options"> 
  <div class="options"> 
    <div class="option"> 
      Писец какой длинный тект, просто нереально длинный, очень-очень длинный текст 
    </div> 
    <div class="option">Другой текст</div> 
    <div class="option">бубу</div> 
    <div class="option">куку</div> 
  </div> 
</div>