improve ui

src/View/ChatPages/messagePage.css

@@ -159,6 +159,14 @@
     --surface: transparent;
 }
 
+.message-bubble .tile.main .reply-button {
+    display: none;
+}
+
+.message-bubble:hover .tile.main .reply-button {
+    display: flex;
+}
+
 .message-bubble .tile.main .text-container {
     padding: var(--control-padding);
 }

src/View/Components/chatMessage.tsx

@@ -13,7 +13,7 @@ export function ChatMessage(
     chatMessageViewModel: ChatMessageViewModel,
 ) {
     const persistenceId = chatMessageViewModel.chatMessage.id;
-    const statusIcon = ViewController.messageIcons.setItems(persistenceId,()=> React.createProxyState(
+    const statusIcon = ViewController.messageIcons.setItems(persistenceId, () => React.createProxyState(
         [chatMessageViewModel.status],
         () => {
             switch (chatMessageViewModel.status.value) {
@@ -66,6 +66,7 @@ export function ChatMessage(
                         <span class="icon">info</span>
                     </button>
                     <button
+                        class="reply-button"
                         on:click={chatMessageViewModel.reply}
                         aria-label={
                             coreViewModel.translations.chatPage.message

src/View/Components/replyPreview.tsx

@@ -7,11 +7,8 @@ export function ReplyPreview(
     coreViewModel: CoreViewModel,
     chatMessageViewModel: ChatMessageViewModel,
 ) {
-    const scroll = () => {
-        chatMessageViewModel.scrollIntoView();
-    }
     return (
-        <div class="reply-preview slide-up" on:click={scroll}>
+        <div class="reply-preview slide-up">
             <div>
                 <span class="secondary">{chatMessageViewModel.sender}</span>
                 <b class="ellipsis" subscribe:innerText={chatMessageViewModel.body}></b>