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.

Open

Resize controls

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

• show a highlight effect on the divider line

• change the mouse cursor to the col-resize cursor

Double-click to reset

If the user double-clicks on the resize bar divider, reset the panel width to the default width (defined below)

Snapping to the default

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.

Open

Snap emphasis animation

Resizing the LHS

• Default LHS sidebar width: 240px

• Touch devices

  • not resizable

• For window widths <= 768

  • not resizable (sidebar is hidden)

• For window widths 769-1199:

  • min-width = 200px

  • max-width = 264px

• For window widths 1200-1679:

  • min-width = 200px

  • max-width = 304px

• For window widths >= 1680px:

  • min-width: 200px

  • max-width: 440px

Resizing the RHS

• For window widths < 900:

  • not resizable

• Touch devices

  • not resizable

• For window widths 900-1199

  • NOTE: RHS overlaps the channel at this viewport width

  • default = 400px

  • min-width = 304px

  • max-width = 400px (default)

• For window widths 1200-1679

  • default width = 400px

  • min-width = 304px

  • max-width = 464px

• For window widths >= 1680px

  • default width = 500px

  • min-width: 304px

  • max-width: 776px