Helpful hints section shows scroll bars when screen size is reduced

[srirambv]

• Did you search for similar issues before submitting this one?
  Yes

• Describe the issue you encountered:
  Helpful hints section shows scroll bars when screen size is reduced

• Platform (Win7, 8, 10? macOS? Linux distro?):
  Windows 10 x64

• Brave Version (revision SHA):
  Brave 0.13.5
  rev 7373a01

• Steps to reproduce:

  1. Open preferences page
  2. Reduce the height of the window
  3. See the helpful hints section move upto the advance button and beyond 685px the section jumps down and shows scroll bars

• Actual result:
  Helpful hint sections shows scrollbars beyond 685px

• Expected result:
  Section should not change positions and show scroll bars

• Will the steps above reproduce in a fresh profile? If not what other info can be added?
  Yes

• Is this an issue in the currently released version?
  No

• Can this issue be consistently reproduced?
  Yes

• Extra QA steps:
  1.
  2.
  3.

• Screenshot if needed:
  
  

• Any related issues:
  cc: @bsclifton @cezaraugusto
  Please change milestone if required

[cezaraugusto]

I don't think that's a regression but likely a decision I made based on new spec.

HelpfulHints should be stick to the bottom, but since navBar is fixed and we added new tabs (such as Sync and Plugins), on small screen heights our hints gets cut. A more polished way of fixing that is making the entire navigation scrollable on such cases, but side-effect of that is losing the triangle indicator.

Or IIUC what @srirambv said we can make hints always at the bottom and always scrollable (same approach as current with small screen height).

cc @bradleyrichter for thoughts.

[bradleyrichter]

hmmm...let's avoid the nested scroll bar. Ideally it hides if it doesn't fit. Like a vertical break point?

Otherwise, it's OK if it falls off but sitting on the bottom looks nice.

[cezaraugusto]

ok I like that

[srirambv]

Verified on master. Works fine. Preview 3 still shows the scrollbars