Fix width and scrolling

This is some jinbodger CSS. I really need to do a unified-CSS sweep.

I start to see why per-component CSS is bad, too; there are so many
long-distance interactions needed!

1 files changed, 8 insertions, 0 deletions

diff --git a/ui/lib/components/Message.svelte b/ui/lib/components/Message.svelte
index f0e7045..ea6e304 100644
--- a/ui/lib/components/Message.svelte
+++ b/ui/lib/components/Message.svelte
@@ -25,6 +25,14 @@
   .message:hover .timestamp {
     display: flex;
   }
+  .message-body {
+      overflow: auto;
+      max-width: 80vw;
+      @media (width > 640px) {
+          /* 21rem is width of the nav bar in full-screen mode. */
+          max-width: calc(90vw - 21rem);
+      }
+  }
   .message-body:empty:after {
     content: '.';
     visibility: hidden;