Better edit message button

src/app.scss

@@ -21,11 +21,11 @@ a.is-disabled {
   filter: grayscale(100%);
 }
 
-/*
-.usermessage:hover .editbutton {
-  display: block !important;
+/* Show the edit button on hover of the user message */
+.usermessage:hover > .message-body > .editbutton {
+  /* TODO: add when ready: display: block !important; */
+  text-decoration: none !important;
 }
-*/
 
 $footer-padding: 3rem 1.5rem;
 

src/lib/Chat.svelte

@@ -129,7 +129,16 @@
   {#if message.role === "user"}
     <article class="message is-info has-text-right usermessage">
       <div class="message-body">
-        <div class="greyscale is-pulled-right ml-2 is-hidden editbutton">✏️</div>
+        <a
+          href={"#"}
+          class="greyscale is-pulled-right ml-2 is-hidden editbutton"
+          on:click={() => {
+            input.value = message.content;
+            input.focus();
+          }}
+        >
+          ✏️
+        </a>
         {@html marked(message.content)}
       </div>
     </article>