Make middlepanel width optionally customisable

[matrixbot]

Created by @ matthew:matrix.org.

[sbts]

This is a regression.
The message pane no-longer expands when the window width is increased.
This is both annoying and a waste of space.
The problem occurs on both app and develop and is a regression as it used to expand just fine.
see Riot-need-to-expand-message-pane.png for an example screenshot"

It's not only a problem on 4K monitors (where that screenshot was taken)
even on my 1280x1024 with zoom 1 click out (in the browser) this is a problem.
As I normally run on that monitor, in that state of zoom I'd been meaning to track down the wide margins, and finally found the time.

[MTRNord]

For Browser user I have this wide css design:
Either use this UserStyle: https://userstyles.org/styles/144258/riot-im-wide
Or this Userscript: https://userstyles.org/styles/userjs/144258/riot-im-wide.user.js
Or go with this css code (needs to be added after the build)

@-moz-document url-prefix("https://riot.im/app/"), url-prefix("https://riot.im/develop/"), url-prefix("https://riot.im/beta/"), url-prefix("https://riot.im/staging/")
{
  .mx_RoomView_messageListWrapper
  {
    max-width: 100% !important;
  }

  .mx_MessageComposer_wrapper
  {
    max-width: 100% !important;
  }

  .mx_RoomHeader .mx_RoomHeader_wrapper
  {
    max-width: 100% !important;
  }

  .mx_RoomView .mx_RoomView_auxPanel
  {
    max-width: 100% !important;
    max-height: 74% !important;
  }

  .mx_UserSettings
  {
    max-width: 100% !important;
  }

  .mx_TopUnreadMessagesBar
  {
    max-width: 100% !important;
  }

  .mx_RoomDirectory
  {
    max-width: 87% !important;
  }

  .mx_HomePage
  {
    max-width: 87% !important;
  }

  .mx_HomePage_header
  {
    max-width: 78% !important;
  }

  .mx_Dialog
  {
    max-width: 100% !important;
    border-radius: 5px !important;
  }

  .mx_UserSettings_toggle
  {
    margin-bottom: 6px !important;
  }

  .mx_UserSettings_advanced
  {
    line-height: 183% !important;
  }

  .mx_UserNotifSettings_pushRulesTable
  {
    line-height: 172% !important;
  }

  .mx_RoomView_statusAreaBox
  {
    max-width: 100% !important;
  }
}

[MTRNord]

Quickfix electron wide version: Insert the following code to the head section of your client via the console (bottom of the head):

<style>
            .mx_RoomView_messageListWrapper
  {
    max-width: 100% !important;
  }

  .mx_MessageComposer_wrapper
  {
    max-width: 100% !important;
  }

  .mx_RoomHeader .mx_RoomHeader_wrapper
  {
    max-width: 100% !important;
  }

  .mx_RoomView .mx_RoomView_auxPanel
  {
    max-width: 100% !important;
    max-height: 74% !important;
  }

  .mx_UserSettings
  {
    max-width: 100% !important;
  }

  .mx_TopUnreadMessagesBar
  {
    max-width: 100% !important;
  }

  .mx_RoomDirectory
  {
    max-width: 87% !important;
  }

  .mx_HomePage
  {
    max-width: 87% !important;
  }

  .mx_HomePage_header
  {
    max-width: 78% !important;
  }

  .mx_Dialog
  {
    max-width: 100% !important;
    border-radius: 5px !important;
  }

  .mx_UserSettings_toggle
  {
    margin-bottom: 6px !important;
  }

  .mx_UserSettings_advanced
  {
    line-height: 183% !important;
  }

  .mx_UserNotifSettings_pushRulesTable
  {
    line-height: 172% !important;
  }

  .mx_RoomView_statusAreaBox
  {
    max-width: 100% !important;
  }
  </style>

[BloodyIron]

So... can we get this addressed mainline please? :) Milestone maybe?

[status-open-bounty]

Current balance: 0.0 ETH
Tokens: SNT: 2000.00
Contract address: 0xddc2268a74bbf450a0e09feda5dec9dad007eadd

Network: Mainnet
To claim this bounty sign up at https://openbounty.status.im and make sure to update your Ethereum address in My Payment Details so that the bounty is correctly allocated.
To fund it, send ETH or ERC20/ERC223 tokens to the contract address.

[t3chguy]

@lampholder @ara4n would this be a toggle full/default or something more...granular?

[lampholder]

I'm picturing something that lets you resize with width of the room list panel and the right hand panel, most likely coupled with addressing the bug (design decision?) that the timeline text has a maximum width (so that it fills whatever space is left between the LHS and the RHS).

@ara4n what are your thoughts on this?

[georgiemathews]

@lampholder does this still need work, more than happy to help

[turt2live]

We did this by proxy of making the left and right sides resizable.