Summernote buttons varying height

I have a Summernote WYSIWYG editor inside a Bootstrap modal. It uses a custom toolbar. (Although, this problem still occurs using the default toolbar). As you can see in the image below, some of the buttons are varying in height. It's particularly noticeable with the dropdown next to the color change button. Am I missing a file or definition that forces the buttons to be the same size? Here are my included CSS files: ``` <link href="../css/bootstrap.min.css" rel="stylesheet"> <link href="../css/bootstrap-theme.min.css" rel="stylesheet"> <link href="../css/theme.css" rel="stylesheet"> <link href="../css/summernote.css" rel="stylesheet"> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> ``` Here is the JavaScript: ``` <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="../js/bootstrap.min.js"></script> <script src="../assets/js/docs.min.js"></script> <script src="../scripts/summernote.min.js"></script> <script type="text/javascript"> $(document).ready(function(e){ $('#news_editor').summernote({height:150,toolbar:[ ['style',['bold','italic','underline','clear']], ['fontface',['fontname']], ['textsize',['fontsize']], ['fontclr',['color']], ['alignment',['ul','ol','paragraph']], ['insert',['link','picture','table']], ['adv',['codeview']] ]}); }); ... ``` And here is the entire HTML file: http://pastebin.com/G3Heae8J