🎨

src/client/app/common/views/components/media-list.vue

@@ -1,10 +1,12 @@
 <template>
-<div class="mk-media-list" :data-count="mediaList.length">
+<div class="mk-media-list">
+	<div :data-count="mediaList.length">
 		<template v-for="media in mediaList">
 			<mk-media-video :video="media" :key="media.id" v-if="media.type.startsWith('video')" :inline-playable="mediaList.length === 1"/>
 			<mk-media-image :image="media" :key="media.id" v-else :raw="raw"/>
 		</template>
 	</div>
+</div>
 </template>
 
 <script lang="ts">
@@ -24,12 +26,21 @@ export default Vue.extend({
 
 <style lang="stylus" scoped>
 .mk-media-list
+	width 100%
+
+	&:before
+		content ''
+		display block
+		padding-top 56.25% // 16:9
+
+	> div
+		position absolute
+		top 0
+		left 0
+		right 0
+		bottom 0
 		display grid
 		grid-gap 4px
-	height 256px
-
-	@media (max-width 500px)
-		height 192px
 
 		&[data-count="1"]
 			grid-template-rows 1fr