From 45d5d2a1a5d5435d44bdbdcb53c9861823df3eda Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Thu, 10 Oct 2024 22:35:52 +0300
Subject: [PATCH] web/timeline: improve formatted message styles

---
 web/src/ui/timeline/TimelineEvent.css       | 24 +++++++++++++++++----
 web/src/ui/timeline/TimelineEvent.tsx       |  2 +-
 web/src/ui/timeline/content/MessageBody.tsx |  2 +-
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/web/src/ui/timeline/TimelineEvent.css b/web/src/ui/timeline/TimelineEvent.css
index 55bd226..f558242 100644
--- a/web/src/ui/timeline/TimelineEvent.css
+++ b/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;
-}
diff --git a/web/src/ui/timeline/TimelineEvent.tsx b/web/src/ui/timeline/TimelineEvent.tsx
index d24b26b..d1ac09f 100644
--- a/web/src/ui/timeline/TimelineEvent.tsx
+++ b/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"
diff --git a/web/src/ui/timeline/content/MessageBody.tsx b/web/src/ui/timeline/content/MessageBody.tsx
index b3e1f35..f087856 100644
--- a/web/src/ui/timeline/content/MessageBody.tsx
+++ b/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),
 			}}/>
 		}