chat: eliminate blockquote padding and newline break, pad last message

Fixes urbit/landscape#473

pkg/interface/src/views/apps/chat/components/ChatMessage.tsx

@@ -188,7 +188,8 @@ export default class ChatMessage extends Component<ChatMessageProps> {
       <Box
         ref={this.divRef}
         pt={renderSigil ? 2 : 0}
-        pb={2}
+        pb={isLastMessage ? 5 : 2}
+        pr={5}
         className={containerClass}
         style={style}
       >
@@ -237,10 +238,7 @@ export const MessageAuthor = ({
   const contact =
     `~${msg.author}` in contacts ? contacts[`~${msg.author}`] : false;
   const showNickname = useShowNickname(contact);
-  const { hideAvatars } =
-    useLocalState(({ hideAvatars }) =>
-      ({ hideAvatars })
-    );
+  const { hideAvatars } = useLocalState(({ hideAvatars }) => ({ hideAvatars }));
   const shipName = showNickname ? contact.nickname : cite(msg.author);
   const copyNotice = 'Copied';
   const color = contact
@@ -276,7 +274,8 @@ export const MessageAuthor = ({
     return () => clearTimeout(timer);
   }, [shipName, displayName]);
 
-  const img = contact?.avatar && !hideAvatars ? (
+  const img =
+    contact?.avatar && !hideAvatars ? (
       <BaseImage
         display='inline-block'
         src={contact.avatar}

pkg/interface/src/views/apps/chat/components/content/text.js

@@ -5,6 +5,7 @@ import RemarkDisableTokenizers from 'remark-disable-tokenizers';
 import urbitOb from 'urbit-ob';
 import { Text } from '@tlon/indigo-react';
 import { GroupLink } from '~/views/components/GroupLink';
+import { Row } from '@tlon/indigo-react';
 
 const DISABLED_BLOCK_TOKENS = [
   'indentedCode',
@@ -79,7 +80,7 @@ const MessageMarkdown = React.memo((props) => {
 
   return lines.map((line, i) => (
     <>
-      {i !== 0 && <br />}
+      {i !== 0 && <Row height={2} />}
       <ReactMarkdown
         {...rest}
         source={line}

pkg/interface/src/views/apps/chat/css/custom.css

@@ -191,13 +191,8 @@ h2 {
 }
 
 blockquote {
-  padding-left: 24px;
-  padding-top: 8px;
-  padding-bottom: 8px;
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 8px;
-  margin-bottom: 8px;
+  padding: 0 0 0 16px;
+  margin: 0;
   border-left: 1px solid black;
 }