Refactor groups list styling

Use nesting for readability.

Card 87

h/static/styles/app.scss

@@ -84,29 +84,32 @@ ol {
 
 $group-list-width: 225px;
 
-.group-list .dropdown {
-  white-space: nowrap;
-}
+.group-list {
+  .dropdown {
+    white-space: nowrap;
+  }
 
-.group-list .dropdown-menu {
-  width: $group-list-width;
-}
+  .dropdown-menu {
+    width: $group-list-width;
 
-.group-list .dropdown-menu li {
-  @include pie-clearfix;
-}
+    li {
+      @include pie-clearfix;
+    }
 
-.group-list .dropdown-menu .group-name {
-  float: left;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: $group-list-width - 30px;
-}
+    .group-name {
+      float: left;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: $group-list-width - 30px;
+    }
 
-.group-list .dropdown-menu .new-group-btn {
-  background-color: $gray-lightest;
+    .new-group-btn {
+      background-color: $gray-lightest;
+    }
+  }
 }
 
+/* The user account dropdown menu */
 .user-picker {
   .avatar {
     border-radius: 2px;