Re-centering images after changing image component

Also fixing scaling issues in pages when image is thinner than page width.

packages/client/src/components/MkDriveFileThumbnail.vue

@@ -91,6 +91,8 @@ const isThumbnailAvailable = computed(() => {
 	border: 0;
 	padding: 0;
 	cursor: pointer;
+	align-items: center;
+	justify-content: center;
 
 	> .icon-sub {
 		position: absolute;

packages/client/src/components/MkGalleryPostPreview.vue

@@ -53,8 +53,11 @@ const props = defineProps<{
 	}
 
 	> .thumbnail {
+		display: flex;
 		width: 100%;
 		height: 100%;
+		justify-content: center;
+		align-items: center;
 		position: absolute;
 		transition: all 0.5s ease;
 

packages/client/src/components/page/page.image.vue

@@ -30,8 +30,7 @@ const image = props.hpml.page.attachedFiles.find(
 
 <style lang="scss" scoped>
 .lzyxtsnt {
-	> img {
-		max-width: 100%;
-	}
+	display: flex;
+	justify-content: center;
 }
 </style>

packages/client/src/pages/gallery/post.vue

@@ -149,7 +149,6 @@ import { computed, defineComponent, inject, watch } from "vue";
 import MkButton from "@/components/MkButton.vue";
 import * as os from "@/os";
 import MkContainer from "@/components/MkContainer.vue";
-import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
 import MkPagination from "@/components/MkPagination.vue";
 import MkGalleryPostPreview from "@/components/MkGalleryPostPreview.vue";
 import MkFollowButton from "@/components/MkFollowButton.vue";

packages/client/src/pages/user/index.photos.vue

@@ -98,6 +98,9 @@ onMounted(() => {
 		grid-gap: 6px;
 
 		> .img {
+			display: flex;
+			justify-content: center;
+			align-items: center;
 			position: relative;
 			height: 128px;
 			border-radius: 6px;