Google Code-in

Our webchat was recently made inline (part of the site, vs in an iframe), which means we can start really playing with it.

In the current layout a good portion of the horizontal space is used by the roster. On desktop this is fine, but on mobile devices it really eats into the available chat window space (even with font reduction).

The roster should have a hide/show handle on the far right edge of the chat window. It doesn't need to be big, just wide enough to swipe with a finger. The hide/show should use CSS animation so its clear whats happening to it.

When the screen is less than 720 wide, the panel should start expanded and collapse the first time focus goes to the chat window (aka they tap on it, to enter text or scroll). The user should be able to open and close it as they want from there, and they should know that they can after seeing it collapse.

Finally, add a command (eg, /roster show) to hide and show the roster without using the mouse.