Incognito NTP .content box is not centered at 720px width |
||||
Issue description
Chrome 63.0.3218.0 (also on stable)
macOS 10.12.6
What steps will reproduce the problem?
(1) Install a theme like [1] that has an Incognito NTP background image.
(2) Open an incognito window.
(3) Resize the window to about 720px
What is the expected result?
The .content box is centered.
What happens instead?
The .content box is left-aligned.
720px is half of a common logical screen resolution width (1440px), which makes this problem appear if you make the browser roughly half the screen width.
(I use a tiling window manager, which means I frequently use a width of exactly 720px.)
This seems to be an interaction of:
@@media (max-width: 720px)
(index):152
.content {
-webkit-margin-start: 0;
max-width: 600px !important;
text-align: start;
}
Removing `-webkit-margin-start: 0;` centers the box until it has to overflow (at which point it will match the existing left-align behaviour).
[1] https://chrome.google.com/webstore/detail/desktop/pafkcccccfmnjkhhndjfffifnflhkpdo?hl=en
,
Sep 20 2017
Centered layout on wide screens and left-aligned layout on narrow screens, using 720px as the threshold, is an intentional design choice. However, it's true that there is a range of widths just under 720px where the .content box should probably fill the whole width, and it doesn't.
,
Sep 20 2017
I sent a PR to center the box when the width is just under 720px: https://chromium-review.googlesource.com/c/chromium/src/+/676131 We could alternatively set min-width: 100% and max-width: 600px
,
Sep 21 2017
Thanks for spotting this! Having the .content box fill the full width below 720px sounds goods. However, we should make sure that the text keeps its 600px max-width for readability.
,
Sep 21 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/c113b6491feaeab7aea52ede6461fe9c16d47ddf commit c113b6491feaeab7aea52ede6461fe9c16d47ddf Author: Lucas Garron <lgarron@chromium.org> Date: Thu Sep 21 20:10:41 2017 Fix Incognito NTP message centering for windows just under 720px. This change keeps the content-box centered when the window is between the width of the .content element (600px + padding, since it uses default box-sizing) and 720px. Below that width, it degrades the old behaviour of left alignment. The lack of centered alignment was visible on Incognito new tab pages for themes with a background. TEST=(1) Install a theme like [1] that has an Incognito NTP background image. (2) Open an incognito window. (3) Resize the window to just under 720px (4) Check that the dark box containing the new tab page message is centered. Bug: 767179 Change-Id: Id3229917f6311de8e47ff82062697c886efda5a2 Reviewed-on: https://chromium-review.googlesource.com/676131 Reviewed-by: Evan Stade <estade@chromium.org> Commit-Queue: Lucas Garron <lgarron@chromium.org> Cr-Commit-Position: refs/heads/master@{#503542} [modify] https://crrev.com/c113b6491feaeab7aea52ede6461fe9c16d47ddf/chrome/browser/resources/ntp4/md_incognito_tab.css
,
Sep 21 2017
maxwalker@: I'm sorry, I saw your comment after estade@'s LGTM. I don't really have time to refine this right now, so I'm going to mark it as available.
,
Aug 1
|
||||
►
Sign in to add a comment |
||||
Comment 1 by lgar...@chromium.org
, Sep 20 2017