1635748 - [Hero Layout] Small cards have different heights as expected, at 696px/936px width containers, when sponsored label is displayed on 1 and 2 lines

Status: RESOLVED INVALID

(Firefox :: New Tab Page, defect)

Description

[Valentina Virlics [:vvalentina], Ecosystem QA]

Attachment: cards heights.png

[Affected versions]:

• Firefox Beta 77.0a1 Build ID 20200505174119;

[Affected Platforms]:

• Windows 10;
• Mac OS 10.14;
• Ubuntu 18.04 x64;

[Prerequisites]:

• Have a Firefox Beta 77 build installed;
• Have a new profile created;
• Have the following prefs set in about:config
  -- Browser.search.region to “US”
  -- Browser.newtabpage.activity-stream.discoverystream.spocs-endpoint to https://spocs.getpocket.com/spocs?country=US&region=US-CA
  -- Browser.newtabpage.activity-stream.discoverystream.config to {"api_key_pref":"extensions.pocket.oAuthConsumerKey","collapsible":true,"enabled":true,"show_spocs":true,"hardcoded_layout":false,"personalized":true,"layout_endpoint":"https://getpocket.cdn.mozilla.net/v3/newtab/layout?version=1&consumer_key=$apiKey&layout_variant=hero-layout","unused_key":"unused_2"}

[Steps to reproduce]:

1. Open the browser with the profile from prerequisites.
2. Open about:newtab page.
3. Tap “F12” key to open the browser Inspector.

a. Have the 696px-width container visible and:
-- observe small cards height when the sponsored label is on 1 row (title on 2 rows)
-- observe small cards height when the sponsored label is on 2 rows (title on 2 rows)
b. Have the 936px-width container visible and :
-- observe small cards height when the sponsored label is on 1 row (title on 2 rows)
-- observe small cards height when the sponsored label is on 2 rows (title on 2 rows)

[Expected result]:
Based on the [specs] (https://www.figma.com/file/3c4TF1eRf8y2DhwySP4lkA/Firefox-77-Spec?node-id=0%3A1 )

• 696px-width container
  -> sponsored label is on 1 row (title on 2 rows) => card height is 194px
  -> sponsored label is on 2 rows (title on 2 rows) =>card height is 212px
• 936px-width container
  -> sponsored label is on 1 row (title on 2 rows) => card height is 222px
  -> sponsored label is on 2 rows (title on 2 rows) =>card height is 240px

[Actual result]:

• 696px-width container
  -> sponsored label is on 1 row (title on 2 rows) => card height is 185px
  -> sponsored label is on 2 rows (title on 2 rows) => card height is 204px
• 936px-width container
  -> sponsored label is on 1 row (title on 2 rows) => card height is 222px
  -> sponsored label is on 2 rows (title on 2 rows) => card height is 234px

[Notes]:
This issue generates different values, than those from specs, for Hero card height for both cases:

• we expect a increase of the Hero card height of 15px for 936px-width container and the real value is 12px;
• we expect a increase of the Hero card height of 18px for 639px-width container and the real value is 19px;

Comment 1

[Tyler Miller]

Thanks for catching this Valentina!

I think this is an instance where the design tool is not 100% the same as the way things are being rendered. The actual height of the cards and component are not as important as if the cards in each row align perfectly. As long as everything aligns, some variation in pixel height is OK here.

Comment 2

[Tyler Miller]

Let's close this ticket as the discrepancy is not important