Media controls settings overflow should dynamically truncate items to overflow

[hudson-newey]

At the moment, the media controls component has a static set of items that are placed in the "overflow" menu (displayed with a cog icon).

However, we should dynamically add/remove items from this overflow menu depending on if they will fit in the container.

We should use semantic icons (with a tooltip) if the setting is not placed within the overflow menu, but should expand to the full text (perhaps with icons) when placed inside the overflow menu