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

feat: change message history grids to fix scaling of message timestamps
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details

Browse source
This commit is contained in:
SauceyRed 2025-06-03 16:18:13 +02:00
parent a56e12149b
commit d85eb03ad0
Signed by: sauceyred
GPG key ID: 270B096EF6E9A462
2 changed files with 7 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

10
components/Message.vue
View file

@ -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" :id="props.last ? 'last-message' : undefined" class="message grouped-message" tabindex="0"> <div v-else ref="messageElement" class="message grouped-message" tabindex="0">
<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()">
@ -24,7 +24,7 @@
</span> </span>
</div> </div>
</div> </div>
<div class="message-data"> <div class="message-data" :id="props.last ? 'last-message' : undefined">
<div class="message-text" v-html="sanitized"></div> <div class="message-text" v-html="sanitized"></div>
</div> </div>
</div> </div>
@ -100,8 +100,7 @@ onMounted(async () => {
.message { .message {
text-align: left; text-align: left;
/* border: 1px solid lightcoral; */ /* border: 1px solid lightcoral; */
display: grid; display: contents;
grid-template-columns: 1fr 19fr;
align-items: center; align-items: center;
} }
@ -110,7 +109,7 @@ onMounted(async () => {
} }
#last-message { #last-message {
margin-bottom: 2dvh; margin-bottom: 1dvh;
} }
.message-metadata { .message-metadata {
@ -143,6 +142,7 @@ onMounted(async () => {
min-width: 4dvw; min-width: 4dvw;
text-align: center; text-align: center;
align-content: center; align-content: center;
white-space: nowrap;
} }
.author-username { .author-username {

4
components/MessageArea.vue
View file

@ -245,8 +245,8 @@ onMounted(async () => {
#messages { #messages {
overflow-y: scroll; overflow-y: scroll;
display: flex; display: grid;
flex-direction: column; grid-template-columns: min-content 1fr;
gap: 1dvh; gap: 1dvh;
padding-left: 1dvw; padding-left: 1dvw;
padding-right: 1dvw; padding-right: 1dvw;