From 3d0a56e4c60bb1e3b74a9733ad9f427faabce5b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=90=D0=BB=D0=B5=D0=BA=D1=81=D0=B5=D0=B9=20=D0=95=D1=80?=
 =?UTF-8?q?=D0=BC=D0=BE=D0=BB=D0=B0=D0=B5=D0=B2?= <dotterian@dotterian.ru>
Date: Fri, 21 Jul 2023 17:50:09 +0300
Subject: [PATCH] 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 | 2 ++
 packages/client/src/components/MkGalleryPostPreview.vue | 3 +++
 packages/client/src/components/page/page.image.vue      | 5 ++---
 packages/client/src/pages/gallery/post.vue              | 1 -
 packages/client/src/pages/user/index.photos.vue         | 3 +++
 5 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/components/MkDriveFileThumbnail.vue b/packages/client/src/components/MkDriveFileThumbnail.vue
index 4022ad314..c5af469e9 100644
--- a/packages/client/src/components/MkDriveFileThumbnail.vue
+++ b/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;
diff --git a/packages/client/src/components/MkGalleryPostPreview.vue b/packages/client/src/components/MkGalleryPostPreview.vue
index 2ef339a8f..2d6e00464 100644
--- a/packages/client/src/components/MkGalleryPostPreview.vue
+++ b/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;
 
diff --git a/packages/client/src/components/page/page.image.vue b/packages/client/src/components/page/page.image.vue
index 726446030..1dd0ec73e 100644
--- a/packages/client/src/components/page/page.image.vue
+++ b/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>
diff --git a/packages/client/src/pages/gallery/post.vue b/packages/client/src/pages/gallery/post.vue
index 398adb1bc..aa55cc15b 100644
--- a/packages/client/src/pages/gallery/post.vue
+++ b/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";
diff --git a/packages/client/src/pages/user/index.photos.vue b/packages/client/src/pages/user/index.photos.vue
index 9259364e2..256547323 100644
--- a/packages/client/src/pages/user/index.photos.vue
+++ b/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;