Tweak UI

src/client/components/drive-file-thumbnail.vue

@@ -26,7 +26,7 @@ import {
 	faFileArchive,
 	faFilm
 	} from '@fortawesome/free-solid-svg-icons';
-import ImgWithBlurhash from './img-with-blurhash.vue';
+import ImgWithBlurhash from '@client/components/img-with-blurhash.vue';
 import { ColdDeviceStorage } from '@client/store';
 
 export default defineComponent({

src/client/components/img-with-blurhash.vue

@@ -71,6 +71,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .xubzgfgb {
+	position: relative;
 	width: 100%;
 	height: 100%;
 
@@ -82,6 +83,7 @@ export default defineComponent({
 	}
 
 	> canvas {
+		position: absolute;
 		object-fit: cover;
 	}
 

src/client/components/media-image.vue

@@ -27,7 +27,7 @@ import { faExclamationTriangle, faEyeSlash } from '@fortawesome/free-solid-svg-i
 import { getStaticImageUrl } from '@client/scripts/get-static-image-url';
 import { extractAvgColorFromBlurhash } from '@client/scripts/extract-avg-color-from-blurhash';
 import ImageViewer from './image-viewer.vue';
-import ImgWithBlurhash from './img-with-blurhash.vue';
+import ImgWithBlurhash from '@client/components/img-with-blurhash.vue';
 import * as os from '@client/os';
 
 export default defineComponent({

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

@@ -6,10 +6,11 @@
 		<div class="stream" v-if="!fetching && images.length > 0">
 			<MkA v-for="image in images"
 				class="img"
-				:style="`background-image: url(${thumbnail(image.file)})`"
 				:to="notePage(image.note)"
 				:key="image.id"
-			></MkA>
+			>
+				<ImgWithBlurhash :hash="image.blurhash" :src="thumbnail(image.file)" :alt="image.name" :title="image.name"/>
+			</MkA>
 		</div>
 		<p class="empty" v-if="!fetching && images.length == 0">{{ $ts.nothing }}</p>
 	</div>
@@ -23,10 +24,12 @@ import { getStaticImageUrl } from '@client/scripts/get-static-image-url';
 import notePage from '../../filters/note';
 import * as os from '@client/os';
 import MkContainer from '@client/components/ui/container.vue';
+import ImgWithBlurhash from '@client/components/img-with-blurhash.vue';
 
 export default defineComponent({
 	components: {
 		MkContainer,
+		ImgWithBlurhash,
 	},
 	props: {
 		user: {
@@ -88,10 +91,8 @@ export default defineComponent({
 
 		> .img {
 			height: 128px;
-			background-position: center center;
-			background-size: cover;
-			background-clip: content-box;
 			border-radius: 6px;
+			overflow: clip;
 		}
 	}
 

src/client/style.scss

@@ -26,6 +26,7 @@ html {
 	background-position: center;
 	color: var(--fg);
 	overflow: auto;
+	overflow-wrap: break-word;
 	font-family: "BIZ UDGothic", Roboto, HelveticaNeue, Arial, sans-serif;
 	line-height: 1.35;
 	text-size-adjust: 100%;
@@ -88,10 +89,6 @@ html._themeChanging_ {
 	}
 }
 
-body {
-	overflow-wrap: break-word;
-}
-
 html, body {
 	margin: 0;
 	padding: 0;