Documentation Complete
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:
show a highlight effect on the divider line
change the mouse cursor to the
col-resizecursor
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.
Resizing the LHS
Default channel sidebar width: 240px
For window widths <= 900:
not resizable
Touch devices
not resizable
For window widths 901-1200:
min-width = 200px
max-width = 264px
For window widths 120-1680:
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 901-1200
NOTE: RHS overlaps the channel at this viewport width
default = 400px
min-width = 304px
max-width = 400px (default)
For window widths 1201-1680
default width = 400px
min-width = 304px
max-width = 464px
For window widths > 1680px
default width = 500px
min-width: 304px
max-width: 776px
