Backport emoji fixes to 1.12 (#12327)

* Fix emoji detection in certain cases (#12320)

* Fix emoji detection certain cases

Previous tests weren't complicated enough so there were some situations where emojis were't detected properly. Find the earliest occurance in addition to checking for the longest combination.

Fixes #12312

* ok spell bot

Co-authored-by: Lauris BH <lauris@nix.lv>

* Reduce emoji size (#12317)

* Reduce emoji size

Rendering should now pretty much match GitHub with 1.25em. I verified
that emojis don't increase the line height and removed unecessary size
overrides because now all emojis should appear similar in relation to
the font size.

* fix reaction hover

Co-authored-by: mrsdizzie <info@mrsdizzie.com>
Co-authored-by: Lauris BH <lauris@nix.lv>

4 files changed, 27 insertions, 21 deletions

diff --git a/modules/emoji/emoji.go b/modules/emoji/emoji.go
index e2c3d202e2..169ee0a182 100644
--- a/modules/emoji/emoji.go
+++ b/modules/emoji/emoji.go
@@ -130,6 +130,8 @@ func ReplaceAliases(s string) string {
 // FindEmojiSubmatchIndex returns index pair of longest emoji in a string
 func FindEmojiSubmatchIndex(s string) []int {
 	loadMap()
+	found := make(map[int]int)
+	keys := make([]int, 0)
 
 	//see if there are any emoji in string before looking for position of specific ones
 	//no performance difference when there is a match but 10x faster when there are not
@@ -137,11 +139,26 @@ func FindEmojiSubmatchIndex(s string) []int {
 		return nil
 	}
 
+	// get index of first emoji occurrence while also checking for longest combination
 	for j := range GemojiData {
 		i := strings.Index(s, GemojiData[j].Emoji)
 		if i != -1 {
-			return []int{i, i + len(GemojiData[j].Emoji)}
+			if _, ok := found[i]; !ok {
+				if len(keys) == 0 || i < keys[0] {
+					found[i] = j
+					keys = []int{i}
+				}
+				if i == 0 {
+					break
+				}
+			}
 		}
 	}
+
+	if len(keys) > 0 {
+		index := keys[0]
+		return []int{index, index + len(GemojiData[found[index]].Emoji)}
+	}
+
 	return nil
 }
diff --git a/modules/markup/html_test.go b/modules/markup/html_test.go
index 686057d11f..d535e4341b 100644
--- a/modules/markup/html_test.go
+++ b/modules/markup/html_test.go
@@ -266,6 +266,10 @@ func TestRender_emoji(t *testing.T) {
 	test(
 		"Some text with 😄😄 2 emoji next to each other",
 		`<p>Some text with <span class="emoji" aria-label="grinning face with smiling eyes">😄</span><span class="emoji" aria-label="grinning face with smiling eyes">😄</span> 2 emoji next to each other</p>`)
+	test(
+		"😎🤪🔐🤑❓",
+		`<p><span class="emoji" aria-label="smiling face with sunglasses">😎</span><span class="emoji" aria-label="zany face">🤪</span><span class="emoji" aria-label="locked with key">🔐</span><span class="emoji" aria-label="money-mouth face">🤑</span><span class="emoji" aria-label="question mark">❓</span></p>`)
+
 	// should match nothing
 	test(
 		"2001:0db8:85a3:0000:0000:8a2e:0370:7334",
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index b6e0291cad..fbba5d7c5d 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -1271,33 +1271,18 @@ i.icon.centerlock {
 
 .emoji,
 .reaction {
-    font-size: 1.5em;
-    line-height: 1.2;
+    font-size: 1.25em;
+    line-height: 1;
     font-style: normal !important;
     font-weight: normal !important;
-    vertical-align: middle;
-}
-
-#issue-title > .emoji {
-    font-size: 1em;
-}
-
-.commit-summary > .emoji {
-    font-size: 1em;
-}
-
-.label > .emoji {
-    font-size: 1em;
+    vertical-align: -.075em;
 }
 
-.dropdown .emoji {
-    font-size: 1em;
-}
 .emoji img,
 .reaction img {
     border-width: 0 !important;
     margin: 0 !important;
     width: 1em !important;
     height: 1em !important;
-    vertical-align: middle !important;
+    vertical-align: -.15em;
 }
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 5450d8d856..d5c4a984d1 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -2246,7 +2246,7 @@
         .select-reaction {
             display: flex;
             align-items: center;
-            padding: .5rem;
+            padding: 0 .5rem;
 
             &:not(.active) a {
                 display: none;