Improve Timeline Layout When Wide
This is a replacement for !457 (closed) as it had too many edge cases.
User messages on the right is now allowed at any width. The delegate however has a maximum width designed to ensure that the user and non user messages are never too far apart. The delegate is also now centered when the screen width is wider than the delegate width.
User messages on right is still disabled in compact mode along with the messages remaining left aligned. This looks the best for this mode.
The code implements the following sequence as the width is expanded:
- The message bubbles are allowed to expand to initial maximum width (gridunit * 20)
- Then the gap between user and non user messages is allowed to grow
- When the delegate reaches initial max width (gridunit * 40) padding on the left and right is allowed to expand
- When the timeline windows is very wide (> gridunit * 46) both the bubble and delegate are allowed to grow to 1.5x their original size
- After reaching their new maximum if the timeline gets any wider the left right padding just continues to grow
See video below for example
Edited by James Graham