paper-menu-button content appear under app-header

I have a list of paper-item and a paper-menu-button on every list with dynamic-align property is set to true. It works fine in most of the cases but a some point the menu goes under the app-header and can not access the option.

demo code and snapshots below

<template is="dom-repeat" items="{{teamMembers}}">
   <div role="listbox">
     <paper-icon-item class="listbox-item">

      <fop-avatar string="A"></fop-avatar> 

      <paper-item-body class="item-details">
        <div class="name">member name [[index]]</div>
        <div class="title">member title</div>
      </paper-item-body>

      <paper-menu-button style="color:#0B746E;" dynamic-align="true">

          <paper-icon-button style="height: 24px;width:24px;" icon="help" class="dropdown-trigger" alt="menu"></paper-icon-button>

          <paper-menu style="padding: 0;" class="dropdown-content" on-iron-activate="_modifyRolesQueues">
              <paper-item> option A </paper-item>
              <paper-item> option B </paper-item>
              <paper-item> option C </paper-item>
              <paper-item> option D </paper-item>
              <paper-item> option E </paper-item>
              <paper-item> option F </paper-item>
              <paper-item> option G </paper-item>
          </paper-menu>

      </paper-menu-button>

    </paper-icon-item>
   </div>
 </template>

snapshots when clicked on member name 2,6 and 4 respectively