Important Links

As part of the global layout updates, there is an opportunity to enable resizing of the LHS and RHS panels. Below outlines the minimum and maximum sizes for the panels as well as some rules for different breakpoints.

...

Resize controls

When the user hovers their mouse within 8px on either side of the vertical divider line of the LHS or RHS:

...

While dragging when the width approaches the default width within 16px (more or less), snap the panel width to the default. When the snapping happens, add an emphasis animation to the resize bar.

...

Resizing the LHS

• Default channel sidebar width: 240px

• For window widths < 820:

  • not resizable

• Touch devices

  • not resizable

• For window widths 821-1199:

  • min-width = 200px

  • max-width = 264px

• For window widths 1200-1680:

  • min-width = 200px

  • max-width = 304px

• For window widths > 1680px:

  • min-width: 200px

  • max-width: 440px

...

Resizing the RHS

• For window widths < 820:

  • not resizable

• Touch devices

  • not resizable

• For window widths 821-1199

  • NOTE: RHS overlaps the channel at this viewport width

  • default = 400px

  • min-width = 304px

  • max-width = 400px (default)

• For window widths 1200-1680

  • default width = 400px

  • min-width = 304px

  • max-width = 464px

• For window widths > 1680px

  • default width = 500px

  • min-width: 304px

  • max-width: 776px

...