From ff86c2f5976786fbf274c8951382931229a412e6 Mon Sep 17 00:00:00 2001
From: truewhile <779943132@qq.com>
Date: Tue, 15 Sep 2026 18:50:50 +0800
Subject: [PATCH] =?UTF-8?q?yb=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/MediaCard.tsx      | 7 +++++--
 web/src/pages/LibraryMovieActions.tsx | 4 ++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/web/src/components/MediaCard.tsx b/web/src/components/MediaCard.tsx
index a71f1dc..4790a16 100644
--- a/web/src/components/MediaCard.tsx
+++ b/web/src/components/MediaCard.tsx
@@ -4,6 +4,9 @@ import { Film, Play, Layers, Star } from 'lucide-react'
 import { imageURL } from '../api/client'
 import type { Media } from '../types'
 
+const ACTION_OVERLAY_CLASS =
+  'absolute right-2 top-2 z-20 flex flex-wrap justify-end gap-1 opacity-100 transition-opacity sm:pointer-events-none sm:opacity-0 sm:group-hover:pointer-events-auto sm:group-hover:opacity-100 sm:focus-within:pointer-events-auto sm:focus-within:opacity-100'
+
 // memo：父级状态变化（如轮播切图、其它卡片操作）不再级联重渲染所有卡片。
 // 注意 actions/renderActions 必须引用稳定（用 renderActions 传函数）memo 才生效。
 export const MediaCard = memo(function MediaCard({
@@ -153,7 +156,7 @@ export const MediaCard = memo(function MediaCard({
           {card}
         </button>
         {actionContent && (
-          <div className="absolute right-2 top-2 z-20 flex flex-wrap justify-end gap-1 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100">
+          <div className={ACTION_OVERLAY_CLASS}>
             {actionContent}
           </div>
         )}
@@ -167,7 +170,7 @@ export const MediaCard = memo(function MediaCard({
         <Link to={href} className="block">
           {card}
         </Link>
-        <div className="absolute right-2 top-2 z-20 flex flex-wrap justify-end gap-1 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100">
+        <div className={ACTION_OVERLAY_CLASS}>
           {actionContent}
         </div>
       </div>
diff --git a/web/src/pages/LibraryMovieActions.tsx b/web/src/pages/LibraryMovieActions.tsx
index 001460c..8df7e24 100644
--- a/web/src/pages/LibraryMovieActions.tsx
+++ b/web/src/pages/LibraryMovieActions.tsx
@@ -30,7 +30,7 @@ export function LibraryMovieActions({
   }
 
   return (
-    <>
+    <div className="hidden flex-wrap justify-end gap-1 sm:flex">
       <button title="智能刮削" disabled={busy} onClick={() => onSmartScrape(media)} className={buttonClass}>
         <Sparkles size={13} />
       </button>
@@ -46,6 +46,6 @@ export function LibraryMovieActions({
       <button title="删除" disabled={busy} onClick={() => onDelete(media)} className={`${buttonClass} hover:!bg-red-50 hover:!text-red-500`}>
         <Trash2 size={13} />
       </button>
-    </>
+    </div>
   )
 }