From 6fbbef1a8e101add91df0bc76de53ea88634ed72 Mon Sep 17 00:00:00 2001
From: freeplay <freeplay@duck.com>
Date: Sun, 16 Jul 2023 17:24:34 -0400
Subject: [PATCH] fix: unable to scroll through reactions on mobile

---
 packages/client/src/components/MkNote.vue     | 12 ++++-----
 packages/client/src/components/MkNoteSub.vue  | 12 ++++-----
 .../client/src/components/MkQuoteButton.vue   |  2 +-
 .../components/MkReactionsViewer.reaction.vue | 26 ++++++++++++-------
 .../src/components/MkReactionsViewer.vue      |  7 ++++-
 .../client/src/components/MkRenoteButton.vue  |  2 +-
 .../client/src/components/MkStarButton.vue    |  2 +-
 .../src/components/MkStarButtonNoEmoji.vue    |  2 +-
 8 files changed, 36 insertions(+), 29 deletions(-)

diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 2f524c64a..4c71b2703 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -148,7 +148,7 @@
 						{{ appearNote.channel.name }}</MkA
 					>
 				</div>
-				<footer ref="footerEl" class="footer" @click.stop tabindex="-1">
+				<footer ref="footerEl" class="footer" tabindex="-1">
 					<XReactionsViewer
 						v-if="enableEmojiReactions"
 						ref="reactionsViewer"
@@ -157,7 +157,7 @@
 					<button
 						v-tooltip.noDelay.bottom="i18n.ts.reply"
 						class="button _button"
-						@click="reply()"
+						@click.stop="reply()"
 					>
 						<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
 						<template
@@ -202,7 +202,7 @@
 						ref="reactButton"
 						v-tooltip.noDelay.bottom="i18n.ts.reaction"
 						class="button _button"
-						@click="react()"
+						@click.stop="react()"
 					>
 						<i class="ph-smiley ph-bold ph-lg"></i>
 					</button>
@@ -213,7 +213,7 @@
 						"
 						ref="reactButton"
 						class="button _button reacted"
-						@click="undoReact(appearNote)"
+						@click.stop="undoReact(appearNote)"
 						v-tooltip.noDelay.bottom="i18n.ts.removeReaction"
 					>
 						<i class="ph-minus ph-bold ph-lg"></i>
@@ -223,7 +223,7 @@
 						ref="menuButton"
 						v-tooltip.noDelay.bottom="i18n.ts.more"
 						class="button _button"
-						@click="menu()"
+						@click.stop="menu()"
 					>
 						<i class="ph-dots-three-outline ph-bold ph-lg"></i>
 					</button>
@@ -862,7 +862,6 @@ defineExpose({
 				z-index: 2;
 				display: flex;
 				flex-wrap: wrap;
-				pointer-events: none; // Allow clicking anything w/out pointer-events: all; to open post
 				margin-top: 0.4em;
 				> :deep(.button) {
 					position: relative;
@@ -876,7 +875,6 @@ defineExpose({
 					max-width: 3.5em;
 					width: max-content;
 					min-width: max-content;
-					pointer-events: all;
 					height: auto;
 					transition: opacity 0.2s;
 					&::before {
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index 9b7f1f5f5..380fd67a7 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -56,7 +56,7 @@
 						</div>
 					</div>
 				</div>
-				<footer ref="footerEl" class="footer" @click.stop tabindex="-1">
+				<footer ref="footerEl" class="footer" tabindex="-1">
 					<XReactionsViewer
 						v-if="enableEmojiReactions"
 						ref="reactionsViewer"
@@ -65,7 +65,7 @@
 					<button
 						v-tooltip.noDelay.bottom="i18n.ts.reply"
 						class="button _button"
-						@click="reply()"
+						@click.stop="reply()"
 					>
 						<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
 						<template v-if="appearNote.repliesCount > 0">
@@ -107,7 +107,7 @@
 						ref="reactButton"
 						v-tooltip.noDelay.bottom="i18n.ts.reaction"
 						class="button _button"
-						@click="react()"
+						@click.stop="react()"
 					>
 						<i class="ph-smiley ph-bold ph-lg"></i>
 					</button>
@@ -118,7 +118,7 @@
 						"
 						ref="reactButton"
 						class="button _button reacted"
-						@click="undoReact(appearNote)"
+						@click.stop="undoReact(appearNote)"
 						v-tooltip.noDelay.bottom="i18n.ts.removeReaction"
 					>
 						<i class="ph-minus ph-bold ph-lg"></i>
@@ -128,7 +128,7 @@
 						ref="menuButton"
 						v-tooltip.noDelay.bottom="i18n.ts.more"
 						class="button _button"
-						@click="menu()"
+						@click.stop="menu()"
 					>
 						<i class="ph-dots-three-outline ph-bold ph-lg"></i>
 					</button>
@@ -470,7 +470,6 @@ function noteClick(e) {
 				z-index: 2;
 				display: flex;
 				flex-wrap: wrap;
-				pointer-events: none; // Allow clicking anything w/out pointer-events: all; to open post
 
 				> :deep(.button) {
 					position: relative;
@@ -484,7 +483,6 @@ function noteClick(e) {
 					max-width: 3.5em;
 					width: max-content;
 					min-width: max-content;
-					pointer-events: all;
 					height: auto;
 					transition: opacity 0.2s;
 					&::before {
diff --git a/packages/client/src/components/MkQuoteButton.vue b/packages/client/src/components/MkQuoteButton.vue
index 44e423ed5..95689df07 100644
--- a/packages/client/src/components/MkQuoteButton.vue
+++ b/packages/client/src/components/MkQuoteButton.vue
@@ -3,7 +3,7 @@
 		v-if="canRenote && $store.state.seperateRenoteQuote"
 		v-tooltip.noDelay.bottom="i18n.ts.quote"
 		class="eddddedb _button"
-		@click="quote()"
+		@click.stop="quote()"
 	>
 		<i class="ph-quotes ph-bold ph-lg"></i>
 	</button>
diff --git a/packages/client/src/components/MkReactionsViewer.reaction.vue b/packages/client/src/components/MkReactionsViewer.reaction.vue
index b44afcca1..73a887826 100644
--- a/packages/client/src/components/MkReactionsViewer.reaction.vue
+++ b/packages/client/src/components/MkReactionsViewer.reaction.vue
@@ -9,7 +9,7 @@
 			canToggle,
 			newlyAdded: !isInitial,
 		}"
-		@click="toggleReaction()"
+		@click.stop="toggleReaction()"
 	>
 		<XReactionIcon
 			class="icon"
@@ -100,13 +100,20 @@ useTooltip(
 
 <style lang="scss" scoped>
 .hkzvhatu {
+	position: relative;
 	display: inline-block;
 	height: 32px;
-	margin: 2px;
-	padding: 0 6px;
-	border-radius: 4px;
+	margin-block: 2px;
+	padding: 0 8px;
 	pointer-events: all;
 	min-width: max-content;
+	&::before {
+		content: "";
+		position: absolute;
+		inset: 0 2px;
+		border-radius: 4px;
+		z-index: -1;
+	}
 	&.newlyAdded {
 		animation: scaleInSmall 0.3s cubic-bezier(0, 0, 0, 1.2);
 		:deep(.mk-emoji) {
@@ -126,9 +133,10 @@ useTooltip(
 		}
 	}
 	&.canToggle {
-		background: rgba(0, 0, 0, 0.05);
-
-		&:hover {
+		&::before {
+			background: rgba(0, 0, 0, 0.05);
+		}
+		&:hover:not(.reacted)::before {
 			background: rgba(0, 0, 0, 0.1);
 		}
 	}
@@ -139,9 +147,7 @@ useTooltip(
 
 	&.reacted {
 		order: -1;
-		background: var(--accent);
-
-		&:hover {
+		&::before {
 			background: var(--accent);
 		}
 
diff --git a/packages/client/src/components/MkReactionsViewer.vue b/packages/client/src/components/MkReactionsViewer.vue
index b60c53df6..2381b0a02 100644
--- a/packages/client/src/components/MkReactionsViewer.vue
+++ b/packages/client/src/components/MkReactionsViewer.vue
@@ -1,5 +1,5 @@
 <template>
-	<div ref="reactionsEl" class="reactions-list tdflqwzn" :class="{ isMe }">
+	<div ref="reactionsEl" class="reactions-list swiper-no-swiping tdflqwzn" :class="{ isMe }">
 		<XReaction
 			v-for="(count, reaction) in note.reactions"
 			:key="reaction"
@@ -50,6 +50,11 @@ const isMe = computed(() => $i && $i.id === props.note.userId);
 		transparent
 	);
 	scrollbar-width: none;
+	pointer-events: none;
+	:deep(*) {
+		pointer-events: all;
+	}
+
 	&::-webkit-scrollbar {
 		display: none;
 	}
diff --git a/packages/client/src/components/MkRenoteButton.vue b/packages/client/src/components/MkRenoteButton.vue
index 16a8b9536..09138d7d6 100644
--- a/packages/client/src/components/MkRenoteButton.vue
+++ b/packages/client/src/components/MkRenoteButton.vue
@@ -5,7 +5,7 @@
 		v-tooltip.noDelay.bottom="i18n.ts.renote"
 		class="button _button canRenote"
 		:class="{ renoted: hasRenotedBefore }"
-		@click="renote(false, $event)"
+		@click.stop="renote(false, $event)"
 	>
 		<i class="ph-repeat ph-bold ph-lg"></i>
 		<p v-if="count > 0 && !detailedView" class="count">{{ count }}</p>
diff --git a/packages/client/src/components/MkStarButton.vue b/packages/client/src/components/MkStarButton.vue
index ecfbf2e73..7af0c5aee 100644
--- a/packages/client/src/components/MkStarButton.vue
+++ b/packages/client/src/components/MkStarButton.vue
@@ -2,7 +2,7 @@
 	<button
 		v-tooltip.noDelay.bottom="i18n.ts._gallery.like"
 		class="button _button"
-		@click="star($event)"
+		@click.stop="star($event)"
 	>
 		<svg
 			v-if="defaultStore.state.woozyMode === true"
diff --git a/packages/client/src/components/MkStarButtonNoEmoji.vue b/packages/client/src/components/MkStarButtonNoEmoji.vue
index 8123270c8..22326c483 100644
--- a/packages/client/src/components/MkStarButtonNoEmoji.vue
+++ b/packages/client/src/components/MkStarButtonNoEmoji.vue
@@ -4,7 +4,7 @@
 		class="button _button"
 		:class="$style.root"
 		ref="buttonRef"
-		@click="toggleStar($event)"
+		@click.stop="toggleStar($event)"
 	>
 		<span v-if="!reacted">
 			<i