✌️

src/client/components/media-list.vue

@@ -33,8 +33,9 @@ export default Vue.extend({
 		raw: {
 			default: false
 		},
-		width: {
+		// specify the parent element
-			type: Number
+		parentElement: {
+			type: Object
 		}
 	},
 	data() {
@@ -43,31 +44,32 @@ export default Vue.extend({
 		}
 	},
 	mounted() {
-		// for Safari bug
+		this.size();
-		if (this.$refs.gridOuter.clientHeight) {
+		window.addEventListener('resize', this.size);
-			this.gridInnerStyle = { height: `${this.$refs.gridOuter.clientHeight}px` }
+		this.$on('resize', this.size);
-		}
+	},
-	}
+	beforeDestroy() {
+		window.removeEventListener('resize', this.size);
+	},
 	methods: {
 		previewable(file) {
 			return file.type.startsWith('video') || file.type.startsWith('image');
-		}
+		},
-	},
+		size() {
-	watch: {
-		width(width) {
 			// for Safari bug
 			if (this.$refs.gridOuter) {
-				let height = 287
+				let height = 287;
+				const parent = this.$props.parentElement || this.$parent.$el;
 
-				if (width) {
+				if (this.$refs.gridOuter.clientHeight) {
-					height = width * 9 / 16;
-				} else if (this.$refs.gridOuter.clientHeight) {
 					height = this.$refs.gridOuter.clientHeight;
+				} else if (parent) {
+					height = parent.getBoundingClientRect().width * 9 / 16;
 				}
 
-				this.gridInnerStyle = { height: `${height}px` }
+				this.gridInnerStyle = { height: `${height}px` };
 			} else {
-				this.gridInnerStyle = {}
+				this.gridInnerStyle = {};
 			}
 		}
 	}

src/client/components/sub-note-content.vue

@@ -9,7 +9,7 @@
 	</div>
 	<details v-if="note.files.length > 0">
 		<summary>({{ $t('withNFiles', { n: note.files.length }) }})</summary>
-		<x-media-list :media-list="note.files" :width="width"/>
+		<x-media-list :media-list="note.files"/>
 	</details>
 	<details v-if="note.poll">
 		<summary>{{ $t('poll') }}</summary>
@@ -39,7 +39,7 @@ export default Vue.extend({
 	},
 	data() {
 		return {
-			width: 0,
+			i: this.$refs.i,
 
 			faReply
 		};