From 217d4d950ecb8f60849b65d2414ff81ee734a406 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Sat, 14 Sep 2024 15:28:44 +0530
Subject: [PATCH] [web] Handle the first click on mobile devices

Using opacity: 0 to was causing the first click to be intercepted by the input
element itself on mobile devices.
---
 web/apps/photos/src/components/pages/gallery/PreviewCard.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/web/apps/photos/src/components/pages/gallery/PreviewCard.tsx b/web/apps/photos/src/components/pages/gallery/PreviewCard.tsx
index 718fb628d1..02b4595d45 100644
--- a/web/apps/photos/src/components/pages/gallery/PreviewCard.tsx
+++ b/web/apps/photos/src/components/pages/gallery/PreviewCard.tsx
@@ -45,7 +45,6 @@ const Check = styled("input")<{ $active: boolean }>`
     position: absolute;
     z-index: 10;
     left: 0;
-    opacity: 0;
     outline: none;
     cursor: pointer;
     @media (pointer: coarse) {
@@ -93,8 +92,10 @@ const Check = styled("input")<{ $active: boolean }>`
         border-right: 2px solid #ddd;
         border-bottom: 2px solid #ddd;
     }
-    ${(props) => props.$active && "opacity: 0.5 "};
+    visibility: hidden;
+    ${(props) => props.$active && "visibility: visible; opacity: 0.5;"};
     &:checked {
+        visibility: visible;
         opacity: 1 !important;
     }
 `;