Hipchat .aui-connect-list-item displayed weird



I am working on an internal Hipchat Connect extension that is providing a Sidebar item using AUI.

When I try to add an action button like in the example in https://developer.atlassian.com/hipchat/guide/sidebar, using something like

<div class="aui-connect-list-item-actions">
   <button class="aui-dropdown2-trigger aui-button aui-dropdown2-trigger-arrowless" aria-owns="list-item-1"
         aria-haspopup="true" id="list-item-1-action-menu" data-no-focus="true">
      <span class="aui-icon aui-icon-small aui-iconfont-more"></span>
   <div id="list-item-1" class="aui-style-default aui-dropdown2 aui-connect-list-item-action">
      <ul class="aui-list-truncate">
         <li><a href="#">Menu item 1</a></li>
         <li><a href="#">Menu item 2</a></li>

The “divider” thing between the action button and the content looks a weird.

For now, eI just removed the backend on .aui-connect-list-item:hover .aui-connect-list-item-actions, but am I doing something wrong? Is this a known issue?