Resolves "Courseware breadcrumb text display"

This MR fixes #727 (closed), which now decides how to display the text according to the available width it has. It now turns the parent element names into ".." from the top if the place is too tide!

How it works

• handleBreadcrumbSizing is introduced and is being called on update and mount events in CoursewareRibbon component
• it calculates the available width for the breadcrubms text to be displayed in, based on that it turns the parent name from top to .. and double checks again if the breadcrumb's text can fit in the width!
• using short, long css classes on spans in list items and current-only css for ul class will now make everything easier to manage instead!