Support 1280x1024 and 1368x768 screen resolutions

[sssoleileraaa]

Description

Now that we allow the client window to fit within a 1368x768 and 1280x1024 screen resolution, we need a design that will support smaller speech bubbles or a hidden left pane or some kind of design that'll make it easier to use the client at this resolution. We have to take into account that there can be attachments, a "Failed to send" message on replies, journalist badges (name initials) attached to replies, variable-size source names in the reply box and conversation view, etc.

[eloquence]

We'll touch base with @ninavizz during the 11/12-11/25 sprint to agree upon scope for next round of improvements to the scaling system, with implementation at a later date.

[sssoleileraaa]

Nina and I discussed this today. Here's what we think makes sense for the first iteration:

1. First make text scalable in the following locations:
   

2. Then make the source widget, speech bubble, and file attachment widgets scalable:
   

Note that the speech bubble and file widgets are the same min width as you see in the image with the label 5 and replies are still offset so that there is enough space for the "Failed to send" error message and they look right aligned as you see in the image.

Also, the speech bubble widget should scale as the window expands and shrinks in a way that always displays all of the message content. The file widget should scale as the window expands and shrinks to match the width of the speech bubble, stretching the file widget line between the filename and filesize from 0px to the maximum allowed width of the file widget. The "ENCRYPTED FILE ON SERVER" text should fit with a 0px line as you see in the image. The name of the file should only be truncated with "..." when the filename is too long to display with a 0px line.

As for the source widget, that should scale as the window expands and shrinks, stretching the elided preview text.

[sssoleileraaa]

The work above could be broken up into the following securedrop-client issues: (1) image items 1-3 to scale text, (2) image item 4 to scale source widget, (3) image item 5 to scale speech bubble and file widget

[ninavizz]

Did we resolve this issue, @creviera?