Merge remote-tracking branch 'origin/improve-chat-look' into improve-chat-look

components/Message.vue

@@ -55,8 +55,8 @@
 		</div>
 		<div class="message-data">
 			<div class="message-text" :class="$style['message-text']" v-html="sanitized" :hidden="hideText" tabindex="0"></div>
+			<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
 		</div>
-		<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
 	</div>
 </template>
 

components/MessageMedia.vue

@@ -1,6 +1,6 @@
 <template>
-	<div class="media-container">
+	<div ref="mediaContainer" class="media-container">
-		<NuxtImg v-for="link of props.links" class="media-item" :src="link" @click.prevent="createModal(link)" />
+		<NuxtImg v-for="link of props.links" class="media-item" :src="link" @click.prevent="createModal(link)" @load="imagesLoaded++" />
 	</div>
 </template>
 
@@ -11,6 +11,23 @@ import { render } from 'vue';
 
 const props = defineProps<{ links: string[] }>();
 
+const mediaContainer = ref<HTMLDivElement>();
+
+const imagesLoaded = ref(0);
+
+watch(imagesLoaded, () => {
+	if (imagesLoaded.value < props.links.length) return;
+	const messageDataContainer = mediaContainer.value?.closest(".message-data");
+	const messagesContainer = document.getElementById("messages");
+	if (messageDataContainer && messagesContainer && mediaContainer.value) {
+		const mediaRect = messageDataContainer.getBoundingClientRect();
+		const messagesRect = messagesContainer.getBoundingClientRect();
+		if (mediaRect.right > messagesRect.right) {
+			mediaContainer.value.style.flexDirection = "column";
+		}
+	}
+});
+
 function createModal(link: string) {
 	const div = document.createElement("div");
 	const modal = h(ModalBase, {