Updating scroll component on image load.

assets/components/releases/media.vue

@@ -64,32 +64,38 @@
 				<img
 					:src="`/media/${cover.thumbnail}`"
 					class="item cover"
+					@load="$parent.$emit('load')"
 				>
 			</a>
 		</template>
 
-		<a
+		<div
 			v-for="photo in photos"
 			:key="`media-${photo.index}`"
-			:href="`/media/${photo.path}`"
-			:class="{ sfw }"
-			class="item-link"
-			target="_blank"
-			rel="noopener noreferrer"
+			class="item-container"
 		>
-			<img
-				:src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
-				:alt="`Photo ${photo.index + 1}`"
-				class="item"
+			<a
+				:href="`/media/${photo.path}`"
+				:class="{ sfw }"
+				class="item-link"
+				target="_blank"
+				rel="noopener noreferrer"
 			>
+				<img
+					:src="sfw ? `/img/${photo.sfw.thumbnail}` : `/media/${photo.thumbnail}`"
+					:alt="`Photo ${photo.index + 1}`"
+					class="item"
+					@load="$parent.$emit('load')"
+				>
 
-			<span
-				v-if="sfw"
-				class="warning"
-			>
-				<Icon icon="warning2" />NSFW
-			</span>
-		</a>
+				<span
+					v-if="sfw"
+					class="warning"
+				>
+					<Icon icon="warning2" />NSFW
+				</span>
+			</a>
+		</div>
 	</div>
 </template>
 
@@ -141,7 +147,6 @@ export default {
 @import 'theme';
 
 .media {
-    background: var(--background-dim);
     flex-shrink: 0;
     white-space: nowrap;
     overflow-x: auto;
@@ -154,20 +159,11 @@ export default {
     }
 
 	&.expanded {
-		display: flex;
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(32rem, 1fr));
+		grid-gap: 1rem;
 		justify-content: center;
-		flex-wrap: wrap;
-
-		.item-link,
-		.trailer {
-			margin: 0 0 .5rem 0;
-			height: 18rem;
-			flex: 1;
-		}
-
-		.item {
-			height: 100%;
-		}
+		margin: 0 0 1rem 0;
 	}
 }
 
@@ -198,12 +194,14 @@ export default {
     }
 }
 
-.item-link,
+.item-container,
 .trailer-container {
+	max-width: 100%;
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
+	flex-shrink: 0;
 
     .warning {
         display: none;
@@ -238,9 +236,8 @@ export default {
 }
 
 .item {
-    height: 18rem;
-    vertical-align: middle;
-	object-fit: cover;
+	max-height: 18rem;
+	max-width: 100%;
 	box-shadow: 0 0 3px var(--shadow-weak);
 }
 

assets/components/releases/tile.vue

@@ -150,7 +150,7 @@ export default {
 		position: absolute;
 		top: 0;
 		right: 0;
-		padding: .15rem .25rem .15rem .3rem;
+		padding: .15rem .25rem .15rem .35rem;
 		border-radius: 0 0 0 .5rem;
 		color: var(--text-light);
 		background: var(--primary);

assets/components/scroll/scroll.vue

@@ -70,18 +70,17 @@ function scroll(direction) {
 function mounted() {
 	this.target = this.$slots.default[0].elm;
 
-	this.target.addEventListener('scroll', () => {
-		this.updateScroll();
-	});
-
+	this.target.addEventListener('scroll', () => this.updateScroll());
 	window.addEventListener('resize', this.updateScroll);
 
+	// typically triggered by slotted component when an image loads, affecting scrollWidth
+	this.$on('load', () => this.updateScroll());
 	this.updateScroll();
-	setTimeout(() => this.updateScroll(), 150); // allow CSS to calculate
 }
 
 function beforeDestroy() {
 	this.target.removeEventListener('scroll', this.updateScroll);
+
 	window.removeEventListener('resize', this.updateScroll);
 }