From 19fb448d2af614ff9b331e52b124caa21b5aee93 Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Tue, 6 Sep 2022 21:52:45 +0300
Subject: [PATCH] prevent messages from cutting off on small viewports

---
 frontend/src/components/Message.svelte | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Message.svelte b/frontend/src/components/Message.svelte
index 202c6b9..92555ac 100644
--- a/frontend/src/components/Message.svelte
+++ b/frontend/src/components/Message.svelte
@@ -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}