Update #message width to keep from running off right edge of narrow s…

[kupietools]

In indieweb chat, on my small very old iPhone, the input#message element, where you type in messages to submit to chat, is wider than the screen. This makes it difficult to, at times, impossible to see the end of what you're typing, as in iOS you can't even scroll the input field if you can't drag-select all the way to the right edge of it, and that's past the right edge of the screen on my phone.

By changing the max-width of input#message to 95vw, the input field will always be 95% of the width of the browser window at most, whatever that might be.

N.B. Using 95vw as the width causes problems at wide widths due to the pop-out channel sidebar taking up a lot of the window's width and pushing the input off the right edge of the screen even though may be very wide because 95vw is so big at those widths. But because 400px is usually under 95vw, the 95vw limit only takes priority when the window is so narrow that it's below the breakpoint where the pop-out sidebar is automatically collapsed, so there's no problem in that case.

[gRegorLove]

Thanks for submitting this and sorry for the delay!

This looks like it mostly works when I test in Chrome dev tools, though I think a slight overflow is still caused due to the padding on #chat-footer, its 100% width, and its fixed positioning (or some combination of those). Removing the padding on #chat-footer "fixes" it, though isn't the solution I'd propose.

[artlung]

I might add a box-sizing: border-box because if this gets laid out differently (which I would do but that would be more extensive changes). Already the sizing of the container elements #chat and #chat-footer are too wide as well, and don't resize appropriately based on whether the left sidebar is present. I'd probably fix that next. But this is a band-aid that'll work.