fix(gallery): 🐛 Hovered Image Info

src/components/GalleryGrid.tsx

@@ -57,17 +57,20 @@ export function GalleryGridImage(i: GalleryGridImageProps) {
 					}}
 					onClick={i.onClick}
 					className={i.href && 'hover-border'}
-					ref={ref}
 					blurDataURL={i.hash}
 				>
 					<div
+						ref={ref}
 						style={{
 							height: '100%',
-							position: 'relative',
+							// position: 'relative',
 							width: '100%',
 							background: 'linear-gradient(160deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0,0.8))',
 							opacity: i.showTooltipOnHover && !hovered ? 0 : 100,
 							transition: 'opacity 0.3s ease-in-out',
+							position: 'absolute',
+							top: 0,
+							right: 0,
 						}}
 					>
 						<div

src/pages/gallery.tsx

@@ -1,13 +1,13 @@
 import { Box, Container, Group, Image, Modal, Pagination } from '@mantine/core';
 import GalleryGrid, { GalleryGridImage } from '../components/GalleryGrid';
 
+import { GalleryImage } from '../components/Gallery';
 import { NextPage } from 'next';
+import Page from '../components/Page';
+import fetcher from '../utils/Fetcher';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
-import { GalleryImage } from '../components/Gallery';
-import Page from '../components/Page';
-import fetcher from '../utils/Fetcher';
 
 const MePage: NextPage = ({ data }: any) => {
 	const [activePage, setPage] = useState(1);