Page MenuHomePhabricator

Embedded buttons in dialogs lack padding
Open, LowPublic

Description

The buttons that are embedded in dialogs (as in the quick confirm example from the demo page) seem to lack padding.

When using actions that indicate the outcome of the decision (instead of the generic "ok"), it is easy for the label to touch the borders of the button as shown below:

Specifying some padding could help preserve that space in these cases, but also for translations to languages with longer words.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 18 2018, 9:19 AM

I think the buttons do have padding defined, but the dialogs are fixed width and the labels have no-wrap. We also have a vertical layout for buttons as seen in the demos:

  1. Use the vertical layout when you think your messages might be too long (easiest fix, downtream)
  2. Make the button layout responsive based on the width of the labels
  3. Make the dialog width responsive based on the width of the dialog
Volker_E triaged this task as Low priority.Oct 29 2018, 4:39 AM

The solutions here are one of two ways:

  • Amending the dialog width or
  • Shorten the dialog primary action button label “Restart” or “Restart translation”.

This is not an upstream issue from my point of view.

Petar.petkovic added a comment.EditedFeb 26 2019, 12:09 PM

The solutions here are one of two ways:

  • Amending the dialog width or
  • Shorten the dialog primary action button label “Restart” or “Restart translation”.

This is not an upstream issue from my point of view.

The proposed solutions could also be broken in some other languages. If we increase the width, nothing guarantees some translation will not match that new width like English text matches current width. Same goes if we change the wording in English.

We should not increase the width when (probably) only problematic language is English. For example, nothing is wrong currently in German: