Let the annotation post button resize to fit its content

Remove the fixed width from the annotation post button
and let the dropdown menu's width adjust to fit its
content rather than being the same width as the button.

To avoid the menu disappearing into the left edge of
the sidebar, the menu has been re-aligned so that
it is centered underneath the button's dropdown arrow.

 * Simplify the styling used to hide the dropdown menu
   to use just the visibility property instead of
   setting pointer events to none, applying a rotation transform
   _and_ setting opacity to 0.

   I'm unclear why the combination of a transform, pointer events
   and opacity was used originally but the dropdown menus
   continue to work with the simplified styling.

T-112

h/static/styles/app.scss

@@ -153,6 +153,12 @@ $group-list-width: 270px;
   }
 }
 
+// the name of a group in the groups drop-down list
+// and 'Post to <Group>' button for saving annotations
+.group-name-link {
+  white-space: nowrap;
+}
+
 /* The user account dropdown menu */
 .user-picker {
   .avatar {

h/static/styles/common.scss

@@ -164,14 +164,12 @@ html {
 }
 
 .dropdown-menu {
-  @include rotateX(90deg);
+  visibility: hidden;
   background: $white;
   border: solid 1px $gray-lighter;
   margin-top: .8em;
   top: 100%;
   float: left;
-  opacity: 0;
-  pointer-events: none;
   position: absolute;
   z-index: 2;
 
@@ -248,14 +246,22 @@ html {
       right: 0;
     }
   }
+
+  // Aligns the dropdown menu's '▲' indicator to the center,
+  // the menu itself has to be aligned by the user
+  &.pull-center {
+    // Align the tail
+    &:before, &:after {
+      left: auto;
+      right: 50%;
+    }
+  }
 }
 
 .open {
   & > .dropdown-menu {
     @include smallshadow;
-    @include rotateX(0);
-    opacity: 1;
-    pointer-events: auto;
+    visibility: visible;
   }
 }
 

h/static/styles/publish-annotation-btn.scss

@@ -2,14 +2,32 @@
   display: flex;
 
   &__btn {
-    width: 250px;
+    position: relative;
   }
 
+  // a container which wraps the dropdown menu
+  // in order to allow it to be positioned
+  // relative to its own width
+  &__dropdown-container {
+    position: absolute;
+    left: 100%;
+  }
+
+  // the content of the dropdown menu
   &__dropdown-menu {
-    width: 100%;
+    // align the ▼ arrow in the dropdown button
+    // with the ▲ arrow in the dropdown menu
+    position: relative;
+    left: calc(-50% - 6px);
   }
 }
 
+// .dropdown-menu initially hides the dropdown via
+// `visibility`. Show it when the dropdown is open
+.open .publish-annotation-btn__dropdown-menu {
+  visibility: visible;
+}
+
 .publish-annotation-cancel-btn {
   @extend .btn--cancel;
 

h/templates/client/publish_annotation_btn.html

@@ -7,32 +7,34 @@
     dropdown-menu-label="Change annotation sharing setting"
     is-disabled="!canPost">
   </dropdown-menu-btn>
-  <ul class="dropdown-menu pull-right group-list publish-annotation-btn__dropdown-menu" role="menu">
-    <li ng-click="vm.setPrivacy('shared')">
-      <div class="group-item">
-        <div class="group-icon-container">
-          <i class="small" ng-class="'h-icon-' + vm.group.type"></i>
-        </div>
-        <div class="group-details">
-          <div class="group-name-container">
-            <a href="" class="group-name-link" ng-bind="vm.group.name"></a>
+  <div class="publish-annotation-btn__dropdown-container">
+    <ul class="dropdown-menu pull-center group-list publish-annotation-btn__dropdown-menu" role="menu">
+      <li ng-click="vm.setPrivacy('shared')">
+        <div class="group-item">
+          <div class="group-icon-container">
+            <i class="small" ng-class="'h-icon-' + vm.group.type"></i>
+          </div>
+          <div class="group-details">
+            <div class="group-name-container">
+              <a href="" class="group-name-link" ng-bind="vm.group.name"></a>
+            </div>
           </div>
         </div>
-      </div>
-    </li>
-    <li ng-click="vm.setPrivacy('private')">
-      <div class="group-item">
-        <div class="group-icon-container">
-          <i class="small h-icon-lock"></i>
-        </div>
-        <div class="group-details">
-          <div class="group-name-container">
-            <a href="" class="group-name-link" ng-bind="vm.privateLabel"></a>
+      </li>
+      <li ng-click="vm.setPrivacy('private')">
+        <div class="group-item">
+          <div class="group-icon-container">
+            <i class="small h-icon-lock"></i>
+          </div>
+          <div class="group-details">
+            <div class="group-name-container">
+              <a href="" class="group-name-link" ng-bind="vm.privateLabel"></a>
+            </div>
           </div>
         </div>
-      </div>
-    </li>
-  </ul>
+      </li>
+    </ul>
+  </div>
 </div>
 <button class="publish-annotation-cancel-btn btn-clean"
         ng-click="vm.cancel()"