web/timeline: improve formatted message styles

web/src/ui/timeline/TimelineEvent.css

@@ -38,13 +38,29 @@ div.timeline-event {
 	}
 }
 
+div.html-body {
+	img[data-mx-emoticon] {
+		vertical-align: middle;
+	}
+
+	blockquote {
+		border-left: 2px solid #ccc;
+		padding-left: .5rem;
+	}
+
+	p, ul, ol, dl, table, pre, blockquote {
+		&:not(:last-child) {
+			margin: 0 0 .25rem;
+		}
+		&:last-child {
+			margin: 0;
+		}
+	}
+}
+
 div.media-container {
 	> img {
 		max-width: 100%;
 		max-height: 100%;
 	}
 }
-
-img[data-mx-emoticon] {
-	vertical-align: middle;
-}

web/src/ui/timeline/TimelineEvent.tsx

@@ -14,8 +14,8 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 import React from "react"
-import { RoomStateStore } from "../../api/statestore.ts"
 import { getMediaURL } from "../../api/media.ts"
+import { RoomStateStore } from "../../api/statestore.ts"
 import { DBEvent, MemberEventContent } from "../../api/types"
 import HiddenEvent from "./content/HiddenEvent.tsx"
 import MessageBody from "./content/MessageBody.tsx"

web/src/ui/timeline/content/MessageBody.tsx

@@ -71,7 +71,7 @@ const MessageBody = ({ event }: EventContentProps) => {
 	case "m.emote":
 	case "m.notice":
 		if (content.format === "org.matrix.custom.html") {
-			return <div dangerouslySetInnerHTML={{
+			return <div className="html-body" dangerouslySetInnerHTML={{
 				__html: sanitizeHtml(content.formatted_body!, sanitizeHtmlParams),
 			}}/>
 		}