Align doubled achievement popovers (#8798)

* bug(profile): align both achievement popups (hover vs. click)

* refactor(style): move to CSS/Stylus

website/assets/sprites/css/index.css

@@ -61,6 +61,10 @@
   padding-right: 0.5em;
 }
 
+.achievement-container {
+  height: 52px;
+}
+
 [class*="Mount_Head_"],
 [class*="Mount_Body_"] {
   margin-top:18px; /* Sprite accommodates 105x123 box */

website/client-old/css/shared.styl

@@ -118,3 +118,7 @@ li.spaced
 
 .modal-footer
   border: none
+
+.no-vertical-padding
+  padding-top: 0px
+  padding-bottom: 0px

website/views/shared/profiles/achievements.jade

@@ -1,10 +1,10 @@
 mixin simpleAchiev(achiev)
   - var popoverHtml = '<div class="{{earnedClass}}">{{achiev.title}}<hr>{{achiev.text}}</div>';
-  div(ng-init='earnedClass = achiev.earned ? "" : "muted"',
+  div.achievement-container(ng-init='earnedClass = achiev.earned ? "" : "muted"',
       data-popover-html='#{popoverHtml}',
       popover-placement='{{achievPopoverPlacement}}',
       popover-append-to-body='{{achievAppendToBody}}')&attributes(attributes)
-    button.pet-button(popover-trigger='mouseenter',
+    button.pet-button.no-vertical-padding(popover-trigger='mouseenter',
       data-popover-html='#{popoverHtml}',
       popover-placement='{{achievPopoverPlacement}}',
       popover-append-to-body='{{achievAppendToBody}}')