Menu Customizer: Problem with longer translation

[pavelevap]

Please see attached screenshot, problem is especially with many options (with left scrollbar).

[samuelsidler]

Anything we can do here? @ocean90?

[westonruter]

To prevent the text from overflowing the gear icon, we could wrap the “You are customizing:” text in a <span class="customize-action"> element and apply these styles to it:

.preview-notice > .customize-action {
    display: block;
    width: 160px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

This would mean it would get truncated if the text is too long. We could add a title attribute to reveal the full text.

[pavelevap]

What about moving icons a little bit down?

[westonruter]

Talking with @samuelsidler, we could just stack the buttons on top of each other: customize-action-breathing-room.png​

[pavelevap]

Looks very good! +1

[westonruter]

In 33500:

Customizer: Stack the menu gear icon below the help icon for more text breathing room.

Fixes #33181.

[ocean90]

In 33503:

Customizer: This circular focus thing is hot.

see #33181.

[ocean90]

In 33505:

Customizer: Switch buttons to match the focus order with the visual order.

props afercia.
see #33181.

[obenland]

In 33510:

Customizer: Improve focus styles for screen option and help toggles.

Props ocean90.
See #33181.