Как исправить проблему обрезание текста в попапе?

.popup {
    position: fixed;
    z-index: 200;
    top: 0;
    left: 0px;
    width: 100%;
    height: 100%;
    transform: translateX(-100%);
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #fff;
    display: flex;
    justify-content: center;
    transition: transform .25s ease-in-out;
}

.popup__inner {
    display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
    max-width: 520px;
    width: 100%;
    position: relative;
    z-index: 2;
    margin: 0 auto;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 40px 65px;
    background-color: #051367;
}

.popup--active {
    transform: translateX(0);
}

.popup__title {
    font-size: 48px;
    line-height: 1.2;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 60px;
    font-weight: 900;
}

.popup__close {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    z-index: 1;
    border: none;
    outline: none;
    background-color: transparent;
}

.popup__close:after,
.popup__close:before {
    content: '';
    position: absolute;
    top: 13px;
    left: 3px;
    width: 30px;
    height: 3px;
    background-color: #fff;
}

.popup__close:after {
    transform: rotate(45deg);
}

.popup__close:before {
    transform: rotate(-45deg);
}

<section class="popup popup--active">
  <div class="popup__inner">
    <button class="popup__close"></button>
    <p class="popup__title">drhrdjd?</p>
    <form action="" class="contacts__holder">
      <div class="contacts__box">
        <input type="text" class="input" placeholder="drjdr">
      </div>
      <div class="contacts__box">
        <input type="text" class="input" placeholder="drjdr">
      </div>
      <div class="contacts__box">
        <textarea class="area" placeholder="drjrd"></textarea>
      </div>
            <div class="contacts__box">
        <input type="text" class="input" placeholder="drjdr">
      </div>
      <div class="contacts__box">
        <input type="text" class="input" placeholder="drjdr">
      </div>
      <div class="contacts__box">
        <textarea class="area" placeholder="drjrd"></textarea>
      </div>
            <div class="contacts__box">
        <input type="text" class="input" placeholder="drjdr">
      </div>
      <div class="contacts__box">
        <input type="text" class="input" placeholder="drjdr">
      </div>
      <div class="contacts__box">
        <textarea class="area" placeholder="drjrd"></textarea>
      </div>
      <button class="btn">drjdrj</button>
    </form>
  </div>
</section>