Better animations on opening images in Photoswipe

packages/client/src/components/MkImgWithBlurhash.vue

@@ -68,14 +68,16 @@ onMounted(() => {
 canvas,
 img {
 	display: block;
-	width: 100%;
-	height: 100%;
+	max-width: 100%;
+	max-height: 100%;
 }
 
 canvas {
 	position: absolute;
 	inset: 0;
 	object-fit: cover;
+	width: 100%;
+	height: 100%;
 }
 
 img {

packages/client/src/components/MkMedia.vue

@@ -202,7 +202,7 @@ watch(
 	}
 
 	> a {
-		display: block;
+		display: flex;
 		cursor: zoom-in;
 		overflow: hidden;
 		width: 100%;
@@ -211,6 +211,9 @@ watch(
 		background-size: contain;
 		background-repeat: no-repeat;
 		box-sizing: border-box;
+		justify-content: center;
+		align-items: center;
+
 		&:focus-visible {
 			border: 2px solid var(--accent);
 		}

packages/client/src/components/MkMediaList.vue

@@ -75,7 +75,7 @@ onMounted(() => {
 			}),
 		gallery: gallery.value,
 		children: ".image",
-		thumbSelector: ".image",
+		thumbSelector: ".image img",
 		loop: false,
 		padding:
 			window.innerWidth > 500