Как решить проблему с выпадающим меню?

Question

Это моя онлайн-ссылка на шаблон

Я использую онлайн-шаблон, но после мобильного режима раскрывающийся список показывает слишком большой разрыв.

<div class="app-header__content">
  <div class="app-header-right">
    <div class="header-btn-lg pr-0">
      <div class="widget-content p-0">
        <div class="widget-content-wrapper">
          <div class="widget-content-left  ml-3 header-user-info">
            <div class="widget-heading" style="text-align:center;">
            </div>
            <div class="widget-subheading" style="text-align:center;">
              Welcome
            </div>
          </div>
          <div class="widget-content-left">
            <div class="btn-group">
              <a data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="p-0 btn">
                <i class="fa fa-angle-down ml-2 opacity-8"></i>
              </a>
              <div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu dropdown-menu-right">
                <button type="button" tabindex="0" class="dropdown-item">User Account</button>
                <button type="button" tabindex="0" class="dropdown-item">Settings</button>
                <h6 tabindex="-1" class="dropdown-header">Header</h6>
                <button type="button" tabindex="0" class="dropdown-item">Actions</button>
                <div tabindex="-1" class="dropdown-divider"></div>
                <button class="btn btn-sm btn-info" style="border-radius:5px;margin-left:5%;" href="javascript:document.getElementById('logoutForm').submit()"><i class="fas fa-sign-out-alt"></i> Sign Out</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Как установить высоту больше верхнего абита?

Пожалуйста, помогите. TQ