Improve UI

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

@@ -1,5 +1,5 @@
 <template>
-<MkContainer>
+<MkContainer :max-height="300">
 	<template #header><Fa :icon="faImage" style="margin-right: 0.5em;"/>{{ $ts.images }}</template>
 	<div class="ujigsodd">
 		<MkLoading v-if="fetching"/>
@@ -8,6 +8,7 @@
 				class="img"
 				:style="`background-image: url(${thumbnail(image.file)})`"
 				:to="notePage(image.note)"
+				:key="image.id"
 			></MkA>
 		</div>
 		<p class="empty" v-if="!fetching && images.length == 0">{{ $ts.nothing }}</p>
@@ -52,16 +53,14 @@ export default defineComponent({
 			userId: this.user.id,
 			fileType: image,
 			excludeNsfw: this.$store.state.nsfw !== 'ignore',
-			limit: 9,
+			limit: 10,
 		}).then(notes => {
 			for (const note of notes) {
 				for (const file of note.files) {
-					if (this.images.length < 9) {
-						this.images.push({
-							note,
-							file
-						});
-					}
+					this.images.push({
+						note,
+						file
+					});
 				}
 			}
 			this.fetching = false;
@@ -83,19 +82,15 @@ export default defineComponent({
 	padding: 8px;
 
 	> .stream {
-		display: flex;
-		justify-content: center;
-		flex-wrap: wrap;
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+		grid-gap: 6px;
 
 		> .img {
-			flex: 1 1 33%;
-			width: 33%;
-			height: 90px;
-			box-sizing: border-box;
+			height: 128px;
 			background-position: center center;
 			background-size: cover;
 			background-clip: content-box;
-			border: solid 2px transparent;
 			border-radius: 6px;
 		}
 	}