Update GlBreakpointInstance for panel width

Currently GlBreakpointInstance only works for breakpoints of the entire viewport.

Since in the new UI breakpoints are now dependent on panel widths rather than viewport widths, GlBreakpointInstance should return the parent panel breakpoint.

Why this is important

In the old UI, using GlBreakpointInstance makes it possible to align JS behavior with CSS breakpoints (eg. only execute JS when a certain section is visible). With the paneled UI there can be a mismatch because the panel is below a certain breakpoint, while JS still thinks its on a bigger breakpoint. So we need to be able to align those two.

Possible implementation

Suggestion: you could add an optional argument that takes an element, finds its parent panel and returns that parent's breakpoint:

Example:

• screen is 725px
• panel is 575px

 GlBreakpointInstance.getBreakpointSize() // uses viewport: returns md

 const myApp = document.querySelector('.js-my-app')
 GlBreakpointInstance.getBreakpointSize(myApp) // uses panel: returns sm