hippoz/waffle
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

prevent messages from cutting off on small viewports

Browse source
This commit is contained in:
hippoz 2022-09-06 21:52:45 +03:00
parent e3e1b9ddad
commit 19fb448d2a
No known key found for this signature in database
GPG key ID: 7C52899193467641
1 changed files with 12 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
frontend/src/components/Message.svelte
View file

@ -77,6 +77,7 @@
font-size: small;
visibility: hidden;
margin-left: auto;
flex-shrink: 0;
}
.message.clumped .author {
@ -92,6 +93,14 @@
.message {
padding: var(--space-xxs) var(--space-xxs) var(--space-xxs) var(--space-normplus);
}
.message .message-extra {
display: none;
}
.message:hover .message-extra {
display: inline-flex;
}
}
.message.clumped {
@ -103,12 +112,12 @@
<span class="author">{ message.author_username }</span>
<span class="message-content" class:pending={ message._isPending }>{ message.content }</span>
<span class="date">{ message._createdAtTimeString }</span>
<button class="icon-button edit-message" on:click="{ reply }" aria-label="Reply to Message">
<span class="date message-extra">{ message._createdAtTimeString }</span>
<button class="icon-button edit-message message-extra" on:click="{ reply }" aria-label="Reply to Message">
<CornerUpLeftIcon />
</button>
{#if message._editable}
<button class="icon-button edit-message" on:click="{ () => overlayStore.push(OverlayType.EditMessage, { message }) }" aria-label="Edit Message">
<button class="icon-button edit-message message-extra" on:click="{ () => overlayStore.push(OverlayType.EditMessage, { message }) }" aria-label="Edit Message">
<MoreVerticalIcon />
</button>
{/if}