Page MenuHomePhabricator

Fix application button linebreaking at 90% zoom level in Chrome
Closed, ResolvedPublic

Description

On a fresh phabricator install, the boxes of the app icons don't align properly.

Screenshot:

{F122506}

This is on latest chrome stable on OSX. When I change the width of the CSS Class a.phabricator-application-launch-container, div.phabricator-application-launch-container to 77px instead of 78px it works fine.

Event Timeline

skyronic raised the priority of this task from to Needs Triage.
skyronic updated the task description. (Show Details)
skyronic added a project: Phabricator.
skyronic added subscribers: skyronic, chad.

Is your chrome zoomed to 93% or something like that? Does View -> Actual Size fix this?

Particularly, here are my views at 100% in the Chrome:

Screen_Shot_2014-03-05_at_7.03.07_AM.png (1×930 px, 179 KB)

..and at 90%, after applying one level of View -> Zoom Out:

Screen_Shot_2014-03-05_at_7.03.11_AM.png (1×930 px, 165 KB)

The latter looks similar to your screenshot.

Assuming this is a zoom issue, did you mean to zoom out, or did you accidentally zoom out and not realize it?

It looks like we can detect zoom, so if this was accidental I lean toward adding a piece of code for that and displaying a large "YOU ARE ZOOMED TO 90%, NOT EVERYTHING WILL LOOK GREAT" badge or something (we've seen this with some frequency before, and saw it in the Facebook product even before Phabricator too).

The main problem with this is that if people want to zoom out to 90%, the badge will get in their way. We could add a preference to disable it (but this is yuck, and won't completely solve the issue of people reporting this stuff to us because they occasionally won't attribute a UI glitch to zoom levels and we won't necessarily be able to identify it quickly). We could try to design the badge so it never gets in the way, but this is tricky (we haven't had much luck building global UI without it getting in the way so far).

We could fix this particular glitch, since it's the only one anyone ever reports, but I think everything is probably subtly worse at 90% and users would have a better experience if we could correct them back to 100%. Only one report has ever mentioned intentionally zooming.

skyronic claimed this task.

@epriestley - unfortunately I'm not at my work machine to verify but from the screenshot, but it certainly does look like I'm zoomed out, based on the screenshots.

But yes, I didn't notice specifically whether I'm zoomed out or not, so a note that the zooming to 100% may be a significant benefit.

Cool, let me commandeer this since there's already some good discussion here...

epriestley renamed this task from app icons not displaying properly to Detect and warn users about browser zoom levels.Mar 5 2014, 4:01 PM
epriestley reopened this task as Open.
epriestley claimed this task.
epriestley renamed this task from Detect and warn users about browser zoom levels to Fix application button linebreaking at 90% zoom level in Chrome.Mar 5 2014, 4:14 PM
epriestley reassigned this task from epriestley to chad.
epriestley triaged this task as Low priority.
epriestley edited projects, added Design; removed Phabricator.

We're just going to fix the UI since the warning in D8406 is messy and causes collateral damage.

This is no longer an issue with the small tiles removed in the Redesign.