fix livephoto indicator

src/components/pages/gallery/PreviewCard.tsx

@@ -8,10 +8,11 @@ import { GalleryContext } from 'pages/gallery';
 import { GAP_BTW_TILES, IMAGE_CONTAINER_MAX_WIDTH } from 'constants/gallery';
 import { PublicCollectionGalleryContext } from 'utils/publicCollectionGallery';
 import PublicCollectionDownloadManager from 'services/publicCollectionDownloadManager';
-import LivePhotoIndicatorOverlay from '@mui/icons-material/LightMode';
+import LivePhotoIcon from '@mui/icons-material/LightMode';
 import { isLivePhoto } from 'utils/file';
 import { DeduplicateContext } from 'pages/deduplicate';
 import { logError } from 'utils/sentry';
+import { Overlay } from 'components/Container';
 
 interface IProps {
     file: EnteFile;
@@ -146,6 +147,12 @@ export const SelectedOverlay = styled('div')<{ selected: boolean }>`
     border-radius: 4px;
 `;
 
+export const LivePhotoIndicatorOverlay = styled(Overlay)`
+    display: flex;
+    justify-content: flex-end;
+    padding: 8px;
+`;
+
 const Cont = styled('div')<{ disabled: boolean }>`
     background: #222;
     display: flex;
@@ -311,7 +318,7 @@ export default function PreviewCard(props: IProps) {
             <InSelectRangeOverLay
                 active={isRangeSelectActive && isInsSelectRange}
             />
-            {isLivePhoto(file) && <LivePhotoIndicatorOverlay />}
+            {isLivePhoto(file) && <LivePhotoIndicator />}
             {deduplicateContext.isOnDeduplicatePage && (
                 <FileAndCollectionNameOverlay>
                     <p>{file.metadata.title}</p>
@@ -325,3 +332,11 @@ export default function PreviewCard(props: IProps) {
         </Cont>
     );
 }
+
+function LivePhotoIndicator() {
+    return (
+        <LivePhotoIndicatorOverlay>
+            <LivePhotoIcon />
+        </LivePhotoIndicatorOverlay>
+    );
+}