1522726 - Fix Discovery Stream layout components 2/3 and 1/3 column widths

Status: RESOLVED WONTFIX

(Firefox :: New Tab Page, defect, P2)

Description

[Punam Dahiya [:pdahiya]]

List, Hero, Top Stories components when displayed in 2/3 and 1/3 column layout shows 2 column width as 608px and 1 column width as 280px with 48px pixel space in between.

This should be in sync with design spec that has 2 column and 1 column width as 592px and 296px with 48px space in between.

Comment 1

[Dan Mosedale (:dmosedale, :dmose)]

A suggestion from Wolasi in Slack:

my hunch is that this is the culprit grid-column-end: span 12; (bearbeitet)
and wrapping the full-width and two col layouts with .discovery-stream.ds-layout
i think we should have wrapper classes for full-width and two-col rather than current approach of a
single class to handle both

Comment 2

[Dan Mosedale (:dmosedale, :dmose)]

One of the things that I noticed when first poking at the existing CSS is that there are gutters (ie grid-column-gaps) at both the very beginning and very end of the grid, which seems to be part of the problem, and that is what Wolasi was responding to above.

Comment 3

[Ed Lee :Mardak]

To be clear, the underlying issue is using a css grid columns that span gaps. The CSS spec effectively gives the spanned gaps' width to the column. To fix the issue with css grid, the 2 column layout needs to be specified as 2 columns with differing column widths.

We won't address this for 66 but should aim to fix in 67 nightly (not for uplift).

Comment 5

[Brahmini Nagabandi]

QA Note :

Widths exceed by some px for the 2/3rd card and also looks intentional..not matching the mock.

• Like for 2/3rd card grid, requirement is 592px(per mock) but the latest FF Nightly build has 608px.
• Card borders donot have shadow (grey) per mock but the build has it.

Depends on bug 1520568.

Here is the recording : https://www.dropbox.com/home?preview=bug+-+1520568+question.mp4

Comment 6

[Gavin Suntop [:gvn] (they/them)]

Per discussion with Wolasi: It's ok to leave the build as-is:

ds-column-8: 608px + gridColumnGap: 48px + ds-column-4: 280px = 936px

The mock has different numbers for widths, but that's safe to ignore for now.