fix(frontend) リアクションの表示位置を微調整 (#12651)

* fix(frontend) リアクションの表示位置を微調整

* fix inline-flex

CHANGELOG.md

@@ -64,6 +64,7 @@
 - Fix: 長い名前のチャンネルにおける投稿フォームの表示が崩れる問題を修正
 - Fix: セキュリティ向上のためAiScriptの`Mk:apiExternal`を無効化
 - Fix: ノート中の絵文字をタップして「リアクションする」からリアクションした際にリアクションサウンドが鳴らない不具合を修正
+- Fix: ノート中のリアクションの表示を微調整 #12650
 
 ### Server
 - Enhance: MFM `$[ruby ]` が他ソフトウェアと連合されるように

packages/frontend/src/components/MkReactionsViewer.reaction.vue

@@ -139,12 +139,14 @@ if (!mock) {
 
 <style lang="scss" module>
 .root {
-	display: inline-block;
+	display: inline-flex;
 	height: 42px;
 	margin: 2px;
 	padding: 0 6px;
 	font-size: 1.5em;
 	border-radius: 6px;
+	align-items: center;
+	justify-content: center;
 
 	&.canToggle {
 		background: var(--buttonBg);
@@ -183,7 +185,7 @@ if (!mock) {
 	&.reacted, &.reacted:hover {
 		background: var(--accentedBg);
 		color: var(--accent);
-		box-shadow: 0 0 0px 1px var(--accent) inset;
+		box-shadow: 0 0 0 1px var(--accent) inset;
 
 		> .count {
 			color: var(--accent);