Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Documentation Complete
Note
Tip

Implementation in progress

Important Links

...

Figma design

...

Jira Legacy
serverSystem JIRA
serverIdfa8b0166-b019-31be-aef3-0e1e83e7ecff
keyMM-27936

Figma design

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.

...

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 LHS sidebar width: 240px

  • Touch devices

    • not resizable

  • For window widths < 820:= 768

    • not resizable

    Touch devices

    • not resizable(sidebar is hidden)

  • For window widths 821769-1199:

    • min-width = 200px

    • max-width = 264px

  • For window widths 1200-16801679:

    • min-width = 200px

    • max-width = 304px

  • For window widths >= 1680px:

    • min-width: 200px

    • max-width: 440px

...

Resizing the RHS

  • For window widths < 820900:

    • not resizable

  • Touch devices

    • not resizable

  • For window widths 821900-1199

    • NOTE: RHS overlaps the channel at this viewport width

    • default = 400px

    • min-width = 304px

    • max-width = 400px (default)

  • For window widths 1200-16801679

    • default width = 400px

    • min-width = 304px

    • max-width = 464px

  • For window widths >= 1680px

    • default width = 500px

    • min-width: 304px

    • max-width: 776px

...