Page MenuHomePhabricator

Application pin button is misaligned
Closed, ResolvedPublic

Description

I think that the icon is meant to be centered maybe?

Pinned Applications (1×1 px, 178 KB)

Event Timeline

joshuaspence raised the priority of this task from to Needs Triage.
joshuaspence updated the task description. (Show Details)
joshuaspence added a subscriber: joshuaspence.
chad claimed this task.
chad added a subscriber: chad.

No, it's not meant to be centered. The FontAwesome icons all have varying widths. On buttons they are aligned left, which looks correct in 99% of cases, and wrong on this one case given the icon.

T7993 is the opposite of this. There are essentially two ways to lay these font icons out, either make them absolutely positioned or make them inline. Both have different drawbacks. Inline icons look more fluid, but they break at the icon when wrapped. Absolute are more predicable and break after the first word, but they can have uneven spacing between the icon and words. For buttons I prefer the more predicable route, and for tags, we go more fluid, though T7993 would maybe disagree. I don't really know any other CSS magic to fix these... maybe tables?

Also, #phui is the best tag for these, which is "Phabricator UI". Maybe a good way to think about it is #design is pre-commit, #phui is post-commit. :)

Actually, I might have a way to make these work in the mobile/button case.

In T8885#126858, @chad wrote:

Also, #phui is the best tag for these, which is "Phabricator UI". Maybe a good way to think about it is #design is pre-commit, #phui is post-commit. :)

Noted.