From 8edec1a5a87453e689967b083f497e55ec6afb90 Mon Sep 17 00:00:00 2001
From: Val Lorentz <progval+git@progval.net>
Date: Sat, 12 Feb 2022 13:59:29 +0100
Subject: [PATCH] Make sure the leading '<' is select when copypasting a
 message

Firefox does not seem to select leading (or trailing) characters that are
too small; so this commit sets a very small width, that is still large
enough to be selected.

This commit also adds `display: inline-block`, so the width is not
ignored; but this causes Chrome to ignore the space after `>`, so I made
it a non-breakable space.

An alternative is to make only the leading `only-copy` an
`inline-block`, but I think the non-breakable space is a good idea
regardless.
---
 client/components/Message.vue | 10 +++++-----
 client/css/style.css          |  3 ++-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/client/components/Message.vue b/client/components/Message.vue
index 4b3e5887..fc9d9dd3 100644
--- a/client/components/Message.vue
+++ b/client/components/Message.vue
@@ -27,11 +27,11 @@
 			</span>
 		</template>
 		<template v-else-if="isAction()">
-			<span class="from"><span class="only-copy">*** </span></span>
+			<span class="from"><span class="only-copy">***&nbsp;</span></span>
 			<component :is="messageComponent" :network="network" :message="message" />
 		</template>
 		<template v-else-if="message.type === 'action'">
-			<span class="from"><span class="only-copy">* </span></span>
+			<span class="from"><span class="only-copy">*&nbsp;</span></span>
 			<span class="content" dir="auto">
 				<Username
 					:user="message.from"
@@ -53,21 +53,21 @@
 				<template v-if="message.from && message.from.nick">
 					<span class="only-copy" aria-hidden="true">&lt;</span>
 					<Username :user="message.from" :network="network" :channel="channel" />
-					<span class="only-copy" aria-hidden="true">&gt; </span>
+					<span class="only-copy" aria-hidden="true">&gt;&nbsp;</span>
 				</template>
 			</span>
 			<span v-else-if="message.type === 'plugin'" class="from">
 				<template v-if="message.from && message.from.nick">
 					<span class="only-copy" aria-hidden="true">[</span>
 					{{ message.from.nick }}
-					<span class="only-copy" aria-hidden="true">] </span>
+					<span class="only-copy" aria-hidden="true">]&nbsp;</span>
 				</template>
 			</span>
 			<span v-else class="from">
 				<template v-if="message.from && message.from.nick">
 					<span class="only-copy" aria-hidden="true">-</span>
 					<Username :user="message.from" :network="network" :channel="channel" />
-					<span class="only-copy" aria-hidden="true">- </span>
+					<span class="only-copy" aria-hidden="true">-&nbsp;</span>
 				</template>
 			</span>
 			<span class="content" dir="auto">
diff --git a/client/css/style.css b/client/css/style.css
index 64d51ee4..864451f7 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -280,7 +280,8 @@ p {
 .only-copy {
 	font-size: 0;
 	opacity: 0;
-	width: 0;
+	width: 0.01px;  /* Must be non-zero to be the first selected character on Firefox */
+	display: inline-block;
 }
 
 /* Icons */