add basic code markup

stylesheets/_session.scss

@@ -320,13 +320,18 @@ textarea {
   margin-inline-start: 10px;
 }
 
+pre {
+  backdrop-filter: brightness(0.8);
+  padding: $session-margin-xs;
+}
+
 .module-message__container {
   position: relative;
   display: inline-block;
   overflow: hidden;
   min-width: 30px;
   // To limit messages with things forcing them wider, like long attachment names
-  max-width: 300px;
+  max-width: calc(100vw - 380px - 100px);
   align-items: center;
 }
 label {

stylesheets/_session_conversation.scss

@@ -195,7 +195,7 @@
     align-items: center;
     flex-grow: 1;
     min-height: $composition-container-height;
-    padding: $session-margin-md 0;
+    padding: $session-margin-xs 0;
 
     ul {
       max-height: 70vh;

ts/components/conversation/MessageBody.tsx

@@ -110,6 +110,11 @@ export class MessageBody extends React.Component<Props> {
       );
     }
 
+    if (text && text.startsWith('```') && text.endsWith('```')) {
+      const length = text.length;
+      return <pre className="text-selectable">{text.substring(4, length - 3)}</pre>;
+    }
+
     return this.renderJsxSelectable(
       <Linkify
         text={text}