Meteor accounts-ui dropdown behavior

I am trying to place the standard Meteor accounts-ui into a dropdown with the cog icon as shown in the screenshot and code snippet below. However, two issues arise:

1. Before signing in, there is an odd extra whitespace on the right side. After signing in, it aligns fine.


2. After a single click on any of the elements in the dropdown, the dropdown immediately closes. This is fine when I click Sign in with Google or Sign in, but it should not do that when I click into the text input fields, Forgot password or Create account.

How can I address the above behaviors accordingly? I am happy for any easy hacks. Thanks!

    <ul class="nav navbar-nav navbar-right"> 
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="account-dropdown"><span class="glyphicon glyphicon-cog"></span>{{loginText}}</a>
        <ul class="dropdown-menu">
          <li><b>{{> loginButtons align="right"}}</b></li>
        </ul>
      </li>
    </ul>