Fixing horizontal scroll bug for long component titles

**Jira Ticket**:  [TNL-406](https://openedx.atlassian.net/browse/TNL-406)

**Background**: For components with long title names, the hover-bubble's text was overflowing its container, and causing horizontal scroll bars to appear.  This change is a simple modification to the SASS for Xmodules to address the issue.

**Contacts**: Per the JIRA ticket above, I spoke to @frrrances about this ticket, and had help from @singingwolfboy in getting this submission together

**Components affected**: This is common to both Studio and LMS.

**Users affected**: This potentially affects all users as far as usability goes.

**Test Instructions**: Edit a course component title to have a long name (100-200 characters or more).  Preview the course, or publish changes and view that course.  When viewing the module you just edited in courseware, hover over the title of the component you just edited, and make sure there is no longer a horizontal scroll (See the JIRA ticket and before and after pictures below for more context).

**Before picture**: Note horizontal scroll
![image](https://cloud.githubusercontent.com/assets/1844496/5189285/4af68c1e-74aa-11e4-9912-96eba0728bd2.png)


**After picture**: Horizontal scroll is gone, and text wraps as expected for really long names.  Note that the hover bubble is effectively right-aligned now, per @frrrances' request in the JIRA ticket.
![image](https://cloud.githubusercontent.com/assets/1844496/5189296/64840378-74aa-11e4-8094-d7f9cb0aa81d.png)
Good eye, @sarina, but in this case it is just associating the tooltip arrow with the correct li so it is not necessary to flip.