fix group switcher dd so it doesn't break theme selector dd

Fixes: CNVS-33026

note: although the ticket states the issue is with the theme
selector dropdown - some code introduced in /91330/ actually
caused the problem

test plan:
- setting the stage: this is going to test the group switcher
  dropdown that appears in the left-hand sub-nav inside a course.
  ensure you have a course that has group sets and multipe groups
  within the set
- as an admin - navigate to the course that has groups set-up
- click the people link from within the course sub-nav
- select the tab that has the name of your group set
- from the right-hand area with the heading "Groups" use the cog
  to select the "Visit Group Homepage" option
- you should now see a dropdown at the top of the left-hand sub-nav
  that will allow you to quickly switch between the various groups
  within the Group Set you were in ensure it is still working
  properly...

  group switcher dd = http://screencast.com/t/kK0jEaIdKmh

  theme selector dd = http://screencast.com/t/lqe9lxSnBd

Change-Id: I3db63b80921e3c153359926353c7bf391f8e5c8c
Reviewed-on: https://gerrit.instructure.com/94366
Tested-by: Jenkins
Reviewed-by: Stephen Jensen <sejensen@instructure.com>
Product-Review: Kyle Follett <kfollett@instructure.com>
QA-Review: Dan Sasaki

app/stylesheets/components/_g_groups.scss

@@ -156,13 +156,16 @@
 // group switcher within left sub-nav
 .al-trigger--within-left-menu {
   margin: 0 0 $ic-sp $ic-sp/2;
+
+  &.ui-menu-item {
+    max-width: 200px; //override the kyle menu width for this instance
+  }
 }
-// set a max-width for this particular use case
+// don't let content overflow the width
 .al-options {
   .ui-menu-item {
     a {
       box-sizing: border-box;
-      max-width: 200px;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;