Comment 6 for bug 1522341

Reviewed: https://review.openstack.org/253393
Committed: https://git.openstack.org/cgit/openstack/fuel-web/commit/?id=2f9032015f95cbb3b171a72738bc9d56f4d486a7
Submitter: Jenkins
Branch: master

commit 2f9032015f95cbb3b171a72738bc9d56f4d486a7
Author: Dmitry Bilunov <email address hidden>
Date: Thu Dec 10 13:44:01 2015 +0300

    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