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