Fix broken "English" label in language-popover
Fix broken "English" label in language-popover

CSS layout uses .popover-layout mixin, which fits the contents in a
pre-specified width (defaults to 260px). Popover classes include this
mixin so children widths are calculated during compile-time using Less
arithmetic expansions.

If a text node overflows the container word-wrapping rules would emerge
and cause this bug. Currently, offset calculations are implied by the
triangle arrow positioning stuff, which moves the popover container to
the right (using negative left offset) while moving the arrow (using
positive right offset). To preserve the correct layout, popover block
width should be known in prior.

We can avoid these calculations (still retaining current look-and-feel)
by re-aligning the arrow, setting the .language-popover left offset to
zero and using CSS transformations to translate the whole block to the
left by the half of its width. It would allow as not to rely on a fixed
width, so the box model will expand the blocks as necessary to fit the
text nodes - on my screen it allows language names up to 16 narrow
chars (like 'a') or 10 wide chars ('A').

However, much simplier solution is just changing the padding of the
language name label. In case a longer word won't fit inside the
container, we can always update the @width parameter.

Closes-Bug: 1522341
Change-Id: I182a37da42bd546e72a57ba117b7be15ee187c5f

eayunstack/fuel-web,huntxu/fuel-web,huntxu/fuel-web,eayunstack/fuel-web,stackforge/fuel-web,eayunstack/fuel-web,huntxu/fuel-web,eayunstack/fuel-web,stackforge/fuel-web,stackforge/fuel-web,huntxu/fuel-web,huntxu/fuel-web,eayunstack/fuel-web