From 5a8e1845e2b4e1d868641e09e3fe86f54e038b52 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Tue, 6 Jan 2026 09:06:52 +0800
Subject: [PATCH] fix: reaction button in mobile view

---
 web/src/components/MemoView/components/MemoHeader.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/web/src/components/MemoView/components/MemoHeader.tsx b/web/src/components/MemoView/components/MemoHeader.tsx
index 3196c9973..71b9b0ac6 100644
--- a/web/src/components/MemoView/components/MemoHeader.tsx
+++ b/web/src/components/MemoView/components/MemoHeader.tsx
@@ -54,7 +54,11 @@ const MemoHeader: React.FC<MemoHeaderProps> = ({
       <div className="flex flex-row justify-end items-center select-none shrink-0 gap-2">
         {currentUser && !isArchived && (
           <ReactionSelector
-            className={cn("border-none w-auto h-auto", reactionSelectorOpen && "block!", "hidden group-hover:block")}
+            className={cn(
+              "border-none w-auto h-auto",
+              reactionSelectorOpen && "block!",
+              "block sm:hidden sm:group-hover:block",
+            )}
             memo={memo}
             onOpenChange={setReactionSelectorOpen}
           />
@@ -63,8 +67,8 @@ const MemoHeader: React.FC<MemoHeaderProps> = ({
         {!isInMemoDetailPage && (
           <Link
             className={cn(
-              "flex flex-row justify-start items-center rounded-md p-1 hover:opacity-80",
-              commentAmount === 0 && "invisible group-hover:visible",
+              "flex flex-row justify-start items-center rounded-md px-1 hover:opacity-80 gap-0.5",
+              commentAmount === 0 && "hidden sm:group-hover:flex",
             )}
             to={`/${memo.name}#comments`}
             viewTransition