UI: Display message previews on separate line (#175)

internal/storage/utils.go

@@ -62,6 +62,9 @@ func createSearchText(env *enmime.Envelope) string {
 
 // CleanString removes unwanted characters from stored search text and search queries
 func cleanString(str string) string {
+	// replace \uFEFF with space, see https://github.com/golang/go/issues/42274#issuecomment-1017258184
+	str = strings.ReplaceAll(str, string('\uFEFF'), " ")
+
 	// remove/replace new lines
 	re := regexp.MustCompile(`(\r?\n|\t|>|<|"|\,|;|\(|\))`)
 	str = re.ReplaceAllString(str, " ")

internal/tools/snippets.go

@@ -6,11 +6,11 @@ import (
 )
 
 // CreateSnippet returns a message snippet. It will use the HTML version (if it exists)
-// and fall back to the text version.
+// otherwise the text version.
 func CreateSnippet(text, html string) string {
 	text = strings.TrimSpace(text)
 	html = strings.TrimSpace(html)
-	characters := 200
+	limit := 200
 	spaceRe := regexp.MustCompile(`\s+`)
 	nlRe := regexp.MustCompile(`\r?\n`)
 
@@ -20,22 +20,26 @@ func CreateSnippet(text, html string) string {
 
 	if html != "" {
 		data := nlRe.ReplaceAllString(stripHTML(html), " ")
+		// replace \uFEFF with space, see https://github.com/golang/go/issues/42274#issuecomment-1017258184
+		data = strings.ReplaceAll(data, string('\uFEFF'), " ")
 		data = strings.TrimSpace(spaceRe.ReplaceAllString(data, " "))
 
-		if len(data) <= characters {
+		if len(data) <= limit {
 			return data
 		}
 
-		return data[0:characters] + "..."
+		return data[0:limit] + "..."
 	}
 
 	if text != "" {
-		text = spaceRe.ReplaceAllString(text, " ")
-		if len(text) <= characters {
+		// replace \uFEFF with space, see https://github.com/golang/go/issues/42274#issuecomment-1017258184
+		text = strings.ReplaceAll(text, string('\uFEFF'), " ")
+		text = strings.TrimSpace(spaceRe.ReplaceAllString(text, " "))
+		if len(text) <= limit {
 			return text
 		}
 
-		return text[0:characters] + "..."
+		return text[0:limit] + "..."
 	}
 
 	return ""

server/ui-src/assets/styles.scss

@@ -95,10 +95,6 @@
 
 .message {
 	.subject {
-		display: -webkit-box;
-		-webkit-box-orient: vertical;
-		-webkit-line-clamp: 1;
-		overflow: hidden;
 		color: $text-muted;
 
 		b {

server/ui-src/components/ListMessages.vue

@@ -141,11 +141,13 @@ export default {
 					</div>
 				</div>
 				<div class="col-lg-6 col-xxl-7 mt-2 mt-lg-0">
-					<div class="subject">
+					<div class="subject text-truncate">
 						<b>{{ message.Subject != "" ? message.Subject : "[ no subject ]" }}</b>
-						<small v-if="message.Snippet != ''" class="small">&nbsp; {{ message.Snippet }}</small>
 					</div>
-					<div>
+					<div v-if="message.Snippet != ''" class="small text-muted text-truncate">
+						{{ message.Snippet }}
+					</div>
+					<div v-if="message.Tags.length">
 						<RouterLink class="badge me-1" v-for="t in message.Tags" :to="'/search?q=' + tagEncodeURI(t)"
 							:style="mailbox.showTagColors ? { backgroundColor: colorHash(t) } : { backgroundColor: '#6c757d' }"
 							:title="'Filter messages tagged with ' + t">