Header Login Looking Nice, need a bit of help

I have a nice login in header mod, but when logged out get a login form that is too big…

I have added an avatar in the header which looks great.

Original idea poster mentioned a custom function… I would like a pop up login form or similar.

I got the initial idea from here

Code now looks like this…

<!--Login Form Begin-->
  <?php if (!is_user_logged_in()){ ?>
  <div id="login-form"><!--create new id on css just to make it easy to order things use #login-form -->
  <?php wp_login_form() ; ?>
   <?php wp_register('', ''); ?>&nbsp;|&nbsp;<a href="<?php echo wp_lostpassword_url( get_permalink() ); ?>" title="Lost Password">Lost Password</a>
  </div>
  <?php } else { ?>
  <div id="login-form">
<?php global $userdata; get_currentuserinfo(); echo get_avatar( $userdata->ID, 46 ); ?>  <!-- brings in user avatar if available -->
<?php wp_register('<p>', '</P>'); ?>
  <a href="<?php echo wp_logout_url( get_permalink() ); ?>" title="Logout">Logout</a>
  </div>
  <?php }?>
  <!--Login Form End-->

And for anyones interest, used this as CSS

/* Styling for header login form starts */
/* Login header mods are in header.php in theme folder */
#login-form {
float: right;
border: 1px solid #CCC;
border-radius: 3px;
text-align: right;
padding: 10px;
padding: 0.728571429rem;
max-width: 50%;
min-width: 15%;
line-height: 1.5;
}
#login-form:hover {
outline: -webkit-focus-ring-color auto 5px;
}
#login-form a {
text-decoration: none;
color: #535353;
}
#login-form a:hover {
text-decoration: none;
color: #000000;
}
#login-form img {
border-radius: 3px;
float: left;
}
/* Styling for header login Finshes */