Adjust dropdown menu arrow location for groups list

Position the arrow at the top of the groups list
dropdown menu so that it appears beneath the
dropdown indicator in the top-bar.

This is done by hiding the dropdown menu's "built in"
arrow created via CSS :before and :after pseudo-elements
and introducing a separate element which uses the same
technique with borders to create the dropdown arrow.

The use of a separate element for the arrow allows it
to be aligned with the right edge of the dropdown menu's
parent element (in this case, the group name in the top bar)
rather than the dropdown menu's content.

h/static/styles/common.scss

@@ -172,7 +172,7 @@ html {
   visibility: hidden;
   background: $white;
   border: solid 1px $gray-lighter;
-  margin-top: .8em;
+  margin-top: 6px;
   top: 100%;
   float: left;
   position: absolute;
@@ -261,6 +261,15 @@ html {
       right: 50%;
     }
   }
+
+  // Hides the dropdown menu's default ▲ indicator.
+  // This is used for cases where a separate element is used
+  // as the indicator
+  &.pull-none {
+    &:before, &:after {
+      display: none;
+    }
+  }
 }
 
 .open {
@@ -270,6 +279,53 @@ html {
   }
 }
 
+// A 'standalone' arrow for the top of a dropdown menu.
+// .dropdown-menu has a "built-in" arrow using CSS :before,:after.
+//
+// The standalone arrow is used when the dropdown menu arrow needs
+// to be positioned relative to the item which opens the menu rather
+// than relative to the dropdown menu content.
+//
+// When using the standalone arrow, the built-in arrow is hidden using
+// the .pull-none class
+.dropdown-menu__top-arrow {
+  // the element itself forms the outer border of the arrow
+  $arrow-size: 7px;
+  $bottom-offset: $arrow-size - 1px;
+  visibility: hidden;
+
+  width: 0px;
+  height: 0px;
+  border-top: none;
+  border-left: $arrow-size solid transparent;
+  border-right: $arrow-size solid transparent;
+  border-bottom: $arrow-size solid $gray-lighter;
+  position: absolute;
+  right: 0px;
+  bottom: - $bottom-offset;
+
+  z-index: 3;
+
+  // :after is used to create another arrow of the same size at a 1px
+  // vertical offset, forming the fill and base of the arrow
+  &:after {
+    width: 0px;
+    height: 0px;
+    border-top: none;
+    border-left: $arrow-size solid transparent;
+    border-right: $arrow-size solid transparent;
+    border-bottom: $arrow-size solid white;
+    content: "";
+    position: absolute;
+    left: 0 - $arrow-size;
+    top: 1px;
+  }
+}
+
+.open > .dropdown-menu__top-arrow {
+  visibility: visible;
+}
+
 .masthead {
   margin-bottom: 1em;
 

h/templates/client/group_list.html

@@ -10,7 +10,8 @@
     {{groups.focused().name}}
     <i class="h-icon-arrow-drop-down"></i>
   </span>
-  <ul class="dropdown-menu pull-left" role="menu">
+  <div class="dropdown-menu__top-arrow"></div>
+  <ul class="dropdown-menu pull-none" role="menu">
     <li ng-repeat="group in groups.all()">
       <div ng-class="{'group-item': true, selected: group.id == groups.focused().id}"
            ng-click="groups.focus(group.id)">