From 53ec803f2c399aaa499018c00f1e9a5d53f0c080 Mon Sep 17 00:00:00 2001 From: Temmie Date: Mon, 11 Aug 2025 23:01:28 +0200 Subject: [PATCH] fix(ui): use css instead of javascript to prevent cutting off media --- components/Message.vue | 2 +- components/MessageMedia.vue | 36 +++++++----------------------------- 2 files changed, 8 insertions(+), 30 deletions(-) diff --git a/components/Message.vue b/components/Message.vue index e68bf94..c6207a1 100644 --- a/components/Message.vue +++ b/components/Message.vue @@ -55,7 +55,7 @@
- +
diff --git a/components/MessageMedia.vue b/components/MessageMedia.vue index bf25be6..11d436a 100644 --- a/components/MessageMedia.vue +++ b/components/MessageMedia.vue @@ -1,6 +1,9 @@ @@ -8,26 +11,8 @@ import { ModalBase } from '#components'; 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, { @@ -52,20 +37,13 @@ function createModal(link: string) { .media-container { display: flex; - grid-column: 2; - grid-row: 3; + flex-wrap: wrap; gap: .2rem; -} - -.grouped-message .media-container { - display: flex; - grid-column: 2; - grid-row: 2; + max-width: 100%; } .media-item { cursor: pointer; max-width: 15dvw; } - \ No newline at end of file