Closed Bug 1548995 Opened 5 years ago Closed 3 years ago

Borderless cards are missing padding (so the focus rect overlaps their contents)

Categories

(Firefox :: New Tab Page, enhancement, P3)

enhancement

Tracking

()

RESOLVED WORKSFORME

People

(Reporter: dholbert, Unassigned)

References

Details

Attachments

(2 files)

STR:

  1. Open a new tab.
  2. Ctrl-click some of the recommended articles after the first row.

ACTUAL RESULTS:
For these further-down articles (under e.g. "health and fitness", "Tech", and "Entertainment" headings for me), the focus-rectangle that appears ends up overlapping the text.

EXPECTED RESULTS:
No overlap. They should be styled with some padding between where the focus rectangle draws and where the content is.

Note: the first row of articles (directly under "Recommended by pocket") do not have this problem. They have more padding (i.e. a smaller content area) than the further down articles, apparently.

I am using Nightly 68.0a1 (2019-05-02) (64-bit)

Attached video screencast (deleted) —

Here's a screencast showing the issue. The first half of the screencast shows the expected results with the top row. The second half shows the actual/problematic results with a lower row.

Assignee: nobody → gsuntop
Iteration: --- → 68.4 - Apr 29 - May 12
Priority: -- → P1

Bug 1548915 changed the cards to all be "bordered" cards instead of the previous "borderless" so this is no longer an issue with the default layout but if we have an experiment with "borderless" this bug will appear there.

Summary: Lower-down recommended articles on new-tab page are missing padding (so the focus rect overlaps their contents) → Borderless cards are missing padding (so the focus rect overlaps their contents)

The borderless cards are implemented to design specifications. The focus shadow doesn't actually overlap, but it is flush to the interior text, which is maybe not ideal.

Wolasi, how do you want to address this? Does this need a new design pass or is this ok as it is?

Flags: needinfo?(wkonu)

Yes, implementation is to specifications and Photon guidelines. We're not using any border-less formats in the confirmation study so we can put this on the back burner for now. We can revisit if and when we decide to use a border-less format.

Flags: needinfo?(wkonu)

(In reply to Gavin [:gvn] Suntop from comment #3)

The focus shadow doesn't actually overlap, but it is flush to the interior text, which is maybe not ideal.

Good point -- I overstated things by using the word "overlap".

Part of the reason this is an issue is that the border-color is basically the same as the (hovered) blue color of the title-text, which makes them visually bleed together, which looks like an overlap.

Anyway, not a big deal if we're not pushing forward with this design at the moment.

Attached image screenshot (deleted) —

Just for reference if/when this is revisited, here's a screenshot from Nightly 2019-05-03

(possibly easier to see the issue in this static lossless screenshot than in the dynamic/fuzzy screencast)

Thanks for reference! Will keep you posted if/when we iterate on this.

No longer blocks: pocket-newtab-68
Iteration: 68.4 - Apr 29 - May 12 → ---
Priority: P1 → P3
Type: defect → enhancement
No longer blocks: 69-ds-polish
Assignee: gsuntop → nobody
No longer depends on: 1555953
No longer blocks: pocket-newtab-69
Component: Activity Streams: Newtab → New Tab Page
No longer blocks: 69-ds-polish
No longer blocks: pocket-newtab

This issue no longer reproduces on the new design (tested on Nightly 91.0a1, Win 10), so closing as RWFM.

Status: NEW → RESOLVED
Closed: 3 years ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: