Fix Brave News / NTP responsiveness

[karenkliu]

Description

The NTP layout has remained the same while more elements have been added, causing some responsive issues over time. NTP content at the bottom of the screen is overlapping with each other and interfering with the visibility of the Brave News scroll hint.

Steps to Reproduce

1. Open a new tab page
2. Make the window more narrow
3. See bottom NTP content start to overlap

Actual result:

Expected result:

NTP content at the bottom does not overlap in a way that interferes with visibility of each item with these updates:

• Remove Bookmarks, Settings, and History icon (will be moved to the sidebar soon)
• Use the same "Customize" button style as currently implemented when scrolling Brave Today. It sits on top of all NTP content
• Hide widget stack and clock at breakpoints =<730
• Photo attribution and sponsored image logo should stack on top of the Brave Today scroll hint at breakpoints =<730
• NTP Stats vertically centered at breakpoints <=730

Breakpoints => 1000

When scaling vertically, the bottom NTP furniture stays sticky and visible at the bottom of the screen. The "Customize" button always stays on top of other NTP furniture.

The widget stack will be the first to overflow. Enable the user to scroll to the bottom of the NTP content before beginning the blurred background scroll effect for Brave Today.

Breakpoints 731-999

The photo attribution and sponsored image logo stays sticky on the bottom until it hits NTP furniture above it. At that point, it becomes part of the scrollable content. NTP furniture is scrollable when viewport height is less than the total height of the widgets. The user must scroll so the bottom of NTP furniture before starting the Brave Today blurred background effect.

medium.screen.mp4

Breakpoints <=730

small.screen.mp4

Reproduces how often:

Easily

Brave version (brave://version info)

All versions

Version/Channel Information:

• Can you reproduce this issue with the current release? N/A
• Can you reproduce this issue with the beta channel? N/A
• Can you reproduce this issue with the nightly channel? Yes

Other Additional Information:

• Does the issue resolve itself when disabling Brave Shields? N/A
• Does the issue resolve itself when disabling Brave Rewards? N/A
• Is the issue reproducible on the latest version of Chrome? N/A

Miscellaneous Information:

Figma: https://www.figma.com/file/FMuS3IZbzqzQTyRHz42Oix/?node-id=57%3A12408

[rebron]

cc: @petemill can you help with prioritization on this one?

[karenkliu]

@petemill @ryanml I added details for vertical scaling as well.

[lazymonkey2]

scrolling is still too slow on brave news.
any updates?