Fix preserved whitespace-related issues for previews by separating them from main text

client/css/style.css

@@ -943,7 +943,7 @@ kbd {
 
 #chat .time,
 #chat .from,
-#chat .text {
+#chat .content {
 	display: block;
 	padding: 2px 0;
 	flex: 0 0 auto;
@@ -965,7 +965,7 @@ kbd {
 	position: relative;
 }
 
-#chat .text {
+#chat .content {
 	flex: 1 1 auto;
 	overflow: hidden;
 }
@@ -1024,7 +1024,7 @@ kbd {
 #chat.colored-nicks .user.color-31 { color: #ff4846; }
 #chat.colored-nicks .user.color-32 { color: #ff199b; }
 
-#chat .text {
+#chat .content {
 	padding-left: 10px;
 	padding-right: 6px;
 }
@@ -1093,14 +1093,14 @@ kbd {
 	display: none !important;
 }
 
-#chat .join .text,
-#chat .kick .text,
-#chat .mode .text,
-#chat .nick .text,
-#chat .part .text,
-#chat .quit .text,
-#chat .topic .text,
-#chat .topic_set_by .text {
+#chat .join .content,
+#chat .kick .content,
+#chat .mode .content,
+#chat .nick .content,
+#chat .part .content,
+#chat .quit .content,
+#chat .topic .content,
+#chat .topic_set_by .content {
 	color: #999;
 }
 
@@ -1978,7 +1978,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 
 	#chat .time,
 	#chat .from,
-	#chat .text {
+	#chat .content {
 		border: 0;
 		display: inline;
 		padding: 0;
@@ -2097,7 +2097,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 #chat .part-reason,
 #chat .quit-reason,
 #chat .new-topic,
-#chat .action-text,
+#chat .action .text,
 #chat table.channel-list .topic {
 	white-space: pre-wrap;
 }

client/js/render.js

@@ -71,10 +71,10 @@ function buildChatMessage(data) {
 	}
 
 	const msg = $(templates[template](data.msg));
-	const text = msg.find(".text");
+	const content = msg.find(".content");
 
 	if (template === "msg_action") {
-		text.html(templates.actions[type](data.msg));
+		content.html(templates.actions[type](data.msg));
 	}
 
 	data.msg.previews.forEach((preview) => {

client/js/renderPreview.js

@@ -34,7 +34,7 @@ function renderPreview(preview, msg) {
 $("#chat").on("click", ".toggle-button", function() {
 	const self = $(this);
 	const container = self.closest(".chat");
-	const content = self.closest(".text")
+	const content = self.closest(".content")
 		.find(`.preview[data-url="${self.data("url")}"] .toggle-content`);
 	const bottom = container.isScrollBottom();
 

client/views/actions/action.tpl

@@ -1,6 +1,6 @@
 {{> ../user_name nick=from}}
-<span class="action-text">{{{parse text}}}</span>
+<span class="text">{{{parse text}}}</span>
 
 {{#each links}}
-  <div class="preview" data-url="{{this}}"></div>
+	<div class="preview" data-url="{{this}}"></div>
 {{/each}}

client/views/msg.tpl

@@ -7,8 +7,8 @@
 			{{> user_name nick=from}}
 		{{/if}}
 	</span>
-	<span class="text">
-		{{{parse text}}}
+	<span class="content">
+		<span class="text">{{{parse text}}}</span>
 
 		{{#each links}}
 			<div class="preview" data-url="{{this}}"></div>

client/views/msg_action.tpl

@@ -3,5 +3,5 @@
 		{{tz time}}
 	</span>
 	<span class="from"></span>
-	<span class="text"></span>
+	<span class="content"></span>
 </div>

client/views/msg_unhandled.tpl

@@ -3,7 +3,7 @@
 		{{tz time}}
 	</span>
 	<span class="from">[{{command}}]</span>
-	<span class="text">
+	<span class="content">
 		{{#each params}}
 			<span>{{this}}</span>
 		{{/each}}