Make extra info header properly responseive

The current solution assumed the width of the logo which caused the user info and icons panel to shift down when the topic title is shown.

This fixes that by making the extra info wrapper responsive and use up the full width, not needing manual breakpoints.

It does this simply by moving the user panel before extra info (since it floats right and should be first) and then with `overflow: hidden;` it will only be as wide as the space allows it. The ellipsis works as expected as well.