Block Line Break in dropdown - Vue+Bootstrap

i have a form-inline in navbar and dropdown into, my problem is dropdown line break when resize page::

My code:

<form class="form-inline">
  <button class="btn-no-border f-20">
    <img src="news.svg" alt="" width="28" />
  </button>
  <button class="btn-no-border f-20 ml-2 mr-2">
    <img src="icon_notifications.svg" alt="" width="20" />
  </button>
  <div class="dropdown pmd-dropdown pmd-user-info ml-auto">
    <a
      class="dropdown-toggle media align-items-center"
      data-toggle="dropdown"
      data-sidebar="true"
      aria-expanded="false"
    >
      <app-avatar :username="username" :size="35" />
      <div class="media-body ml-3">
        Usuário
        <app-svgs/>
      </div>
    </a>
    <ul class="dropdown-menu dropdown-menu-right" style="right: -28px; top: 43px;" role="menu">
      <router-link to="/profile" style="text-decoration:none">
        <a class="dropdown-item">
          <i class="fal fa-user"></i>
        </a>
      </router-link>
      <a class="dropdown-item" @click="logout">
        <i class="fad fa-sign-out-alt"></i>
      </a>
    </ul>
  </div>
</form>

Line Break: https://i.imgur.com/6NOzbQQ.png