update other bookmark styles

src/assets/css/index.css

@@ -349,3 +349,19 @@ input[type=range].styled-slider.slider-progress::-ms-fill-lower {
     opacity: 1;
   }
 }
+
+
+.bookmark-button {
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+.group:hover .bookmark-button {
+  opacity: 1;
+}
+
+@media (max-width: 1024px) {
+  .group:hover .bookmark-button {
+    opacity: 0;
+  }
+}

src/components/media/MediaCard.tsx

@@ -8,7 +8,6 @@ import { Link } from "react-router-dom";
 import { mediaItemToId } from "@/backend/metadata/tmdb";
 import { DotList } from "@/components/text/DotList";
 import { Flare } from "@/components/utils/Flare";
-import { useIsMobile } from "@/hooks/useIsMobile";
 import { useSearchQuery } from "@/hooks/useSearchQuery";
 import { usePreferencesStore } from "@/stores/preferences";
 import { MediaItem } from "@/utils/mediaTypes";
@@ -59,7 +58,6 @@ function MediaCardContent({
 }: MediaCardProps) {
   const { t } = useTranslation();
   const percentageString = `${Math.round(percentage ?? 0).toFixed(0)}%`;
-  const { isMobile } = useIsMobile();
 
   const isReleased = useCallback(() => checkReleased(media), [media]);
 
@@ -156,9 +154,7 @@ function MediaCardContent({
 
           {!closable && (
             <div
-              className={classNames("absolute", {
-                "bookmark-button": !isMobile,
-              })}
+              className="absolute bookmark-button"
               onClick={(e) => e.preventDefault()}
             >
               <MediaBookmarkButton media={media} />

src/components/utils/Flare.css

@@ -6,15 +6,6 @@
   opacity: 1 !important;
 }
 
-.bookmark-button {
-  opacity: 0;
-  transition: opacity 0.3s;
-}
-
-.group:hover .bookmark-button {
-  opacity: 1;
-}
-
 /* Ensure text is always visible on mobile */
 @media (max-width: 1024px) {
   /* .group h1, .group button {
@@ -24,8 +15,4 @@
   .group .group-hover\\:opacity-100 {
     opacity: 1; /* Ensure the flare effect is always visible */
   }
-
-  .group:hover .bookmark-button {
-    opacity: 0;
-  }
 }