gorb/frontend
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

fix: last message from user not having bottom margin

Browse source
This commit is contained in:
SauceyRed 2025-06-03 20:49:41 +02:00
parent d986f601de
commit 82fde5671d
Signed by: sauceyred
GPG key ID: 270B096EF6E9A462
1 changed files with 6 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

9
components/Message.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div v-if="props.type == 'normal'" :id="props.last ? 'last-message' : undefined" class="message normal-message" :class="{ 'message-margin-bottom': props.marginBottom }" tabindex="0"> <div v-if="props.type == 'normal'" :id="props.last ? 'last-message' : undefined" class="message normal-message">
<div class="left-column"> <div class="left-column">
<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="username"> <img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="username">
<Icon v-else name="lucide:user" class="message-author-avatar" /> <Icon v-else name="lucide:user" class="message-author-avatar" />
@ -16,7 +16,7 @@
<div class="message-text" v-html="sanitized"></div> <div class="message-text" v-html="sanitized"></div>
</div> </div>
</div> </div>
<div v-else ref="messageElement" class="message grouped-message" tabindex="0"> <div v-else ref="messageElement" class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom }">
<div class="left-column"> <div class="left-column">
<div> <div>
<span :class="{ 'invisible': dateHidden }" class="message-date side-message-date" :title="date.toString()"> <span :class="{ 'invisible': dateHidden }" class="message-date side-message-date" :title="date.toString()">
@ -86,6 +86,10 @@ onMounted(async () => {
align-items: center; align-items: center;
} }
.message-margin-bottom > * {
margin-bottom: 1dvh;
}
.normal-message { .normal-message {
margin-top: 1dvh; margin-top: 1dvh;
} }
@ -121,7 +125,6 @@ onMounted(async () => {
} }
.left-column { .left-column {
min-width: 4dvw;
text-align: center; text-align: center;
align-content: center; align-content: center;
white-space: nowrap; white-space: nowrap;