From 5a15bd5ddbce56f3021d65ef37d8989571c57a5d Mon Sep 17 00:00:00 2001 From: SauceyRed Date: Mon, 11 Aug 2025 04:39:43 +0200 Subject: [PATCH] fix(ui): media cutting off and causing horizontal scroll bar when overflowing, turn flex-direction to column instead --- components/Message.vue | 2 +- components/MessageMedia.vue | 21 +++++++++++++++++++-- 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/components/Message.vue b/components/Message.vue index 770b924..e68bf94 100644 --- a/components/Message.vue +++ b/components/Message.vue @@ -55,8 +55,8 @@
+
- diff --git a/components/MessageMedia.vue b/components/MessageMedia.vue index 0a8ff16..bf25be6 100644 --- a/components/MessageMedia.vue +++ b/components/MessageMedia.vue @@ -1,6 +1,6 @@ @@ -11,6 +11,23 @@ import { render } from 'vue'; const props = defineProps<{ links: string[] }>(); +const mediaContainer = ref(); + +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, {