Enable preserveWhitespace: false, add spaces where needed, fix whitespace when copying text

client/components/Message.vue

@@ -5,7 +5,7 @@
 		:data-from="message.from && message.from.nick">
 		<span
 			:aria-label="message.time | localetime"
-			class="time tooltipped tooltipped-e">{{ messageTime }}</span>
+			class="time tooltipped tooltipped-e">{{ messageTime }} </span>
 		<template v-if="message.type === 'unhandled'">
 			<span class="from">[{{ message.command }}]</span>
 			<span class="content">
@@ -15,16 +15,16 @@
 			</span>
 		</template>
 		<template v-else-if="isAction()">
-			<span class="from" />
+			<span class="from"><span class="only-copy">*** </span></span>
 			<component
 				:is="messageComponent"
 				:network="network"
 				:message="message" />
 		</template>
 		<template v-else-if="message.type === 'action'">
-			<span class="from" />
+			<span class="from"><span class="only-copy">* </span></span>
 			<span class="content">
-				<span class="only-copy">* </span><Username :user="message.from" /> <ParsedMessage
+				<Username :user="message.from" />&#32;<ParsedMessage
 					:network="network"
 					:message="message" />
 				<LinkPreview
@@ -35,9 +35,22 @@
 			</span>
 		</template>
 		<template v-else>
-			<span class="from">
+			<span
+				v-if="message.type === 'message'"
+				class="from">
 				<template v-if="message.from && message.from.nick">
+					<span class="only-copy">&lt;</span>
 					<Username :user="message.from" />
+					<span class="only-copy">&gt; </span>
+				</template>
+			</span>
+			<span
+				v-else
+				class="from">
+				<template v-if="message.from && message.from.nick">
+					<span class="only-copy">-</span>
+					<Username :user="message.from" />
+					<span class="only-copy">- </span>
 				</template>
 			</span>
 			<span class="content">

client/components/MessageTypes/ctcp.vue

@@ -1,6 +1,6 @@
 <template>
 	<span class="content">
-		<Username :user="message.from" />
+		<Username :user="message.from" />&#32;
 		<span class="ctcp-message"><ParsedMessage :text="message.ctcpMessage" /></span>
 	</span>
 </template>

client/components/MessageTypes/join.vue

@@ -1,7 +1,7 @@
 <template>
 	<span class="content">
 		<Username :user="message.from" />
-		<i class="hostmask">({{ message.hostmask }})</i>
+		<i class="hostmask"> ({{ message.hostmask }})</i>
 		has joined the channel
 	</span>
 </template>

client/components/MessageTypes/kick.vue

@@ -5,7 +5,7 @@
 		<Username :user="message.target" />
 		<i
 			v-if="message.text"
-			class="part-reason">(<ParsedMessage
+			class="part-reason"> (<ParsedMessage
 				:network="network"
 				:message="message" />)</i>
 	</span>

client/components/MessageTypes/part.vue

@@ -1,9 +1,7 @@
 <template>
 	<span class="content">
 		<Username :user="message.from" />
-		<i class="hostmask">({{ message.hostmask }})</i>
-		has left the channel
-		<i
+		<i class="hostmask"> ({{ message.hostmask }})</i> has left the channel <i
 			v-if="message.text"
 			class="part-reason">(<ParsedMessage
 				:network="network"

client/components/MessageTypes/quit.vue

@@ -1,9 +1,7 @@
 <template>
 	<span class="content">
 		<Username :user="message.from" />
-		<i class="hostmask">({{ message.hostmask }})</i>
-		has quit
-		<i
+		<i class="hostmask"> ({{ message.hostmask }})</i> has quit <i
 			v-if="message.text"
 			class="quit-reason">(<ParsedMessage
 				:network="network"

client/components/MessageTypes/topic.vue

@@ -1,12 +1,7 @@
 <template>
 	<span class="content">
-		<template v-if="message.from && message.from.nick">
-			<Username :user="message.from" />
-			has changed the topic to:
-		</template>
-		<template v-else>
-			The topic is:
-		</template>
+		<template v-if="message.from && message.from.nick"><Username :user="message.from" /> has changed the topic to: </template>
+		<template v-else>The topic is: </template>
 		<span
 			v-if="message.text"
 			class="new-topic"><ParsedMessage

client/css/style.css

@@ -2498,6 +2498,12 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 		padding: 0;
 	}
 
+	#chat .from::after {
+		/* Add a space because mobile view changes to block display without paddings */
+		content: " ";
+		white-space: pre;
+	}
+
 	#chat .channel .msg.highlight {
 		padding-left: 5px;
 	}

client/js/clipboard.js

@@ -1,7 +1,5 @@
 "use strict";
 
-const $ = require("jquery");
-
 module.exports = function(chat) {
 	const selection = window.getSelection();
 
@@ -14,13 +12,6 @@ module.exports = function(chat) {
 	const documentFragment = range.cloneContents();
 	const div = document.createElement("div");
 
-	$(documentFragment)
-		.find(".from .user")
-		.each((_, el) => {
-			el = $(el);
-			el.text(`<${el.text()}>`);
-		});
-
 	div.id = "js-copy-hack";
 	div.appendChild(documentFragment);
 	chat.appendChild(div);

webpack.config.js

@@ -24,6 +24,11 @@ const config = {
 				test: /\.vue$/,
 				use: {
 					loader: "vue-loader",
+					options: {
+						compilerOptions: {
+							preserveWhitespace: false,
+						},
+					},
 				},
 			},
 			{