improve messagePage

src/View/ChatPages/messagePage.css

@@ -14,9 +14,8 @@
 
 /* composer */
 #message-page #composer {
-  border-top: 1px solid var(--border);
-
   display: flex;
+  justify-content: center;
 }
 
 #message-page #composer input {
@@ -28,12 +27,88 @@
   flex: 1;
 }
 
+@media (max-width: 700px) {
+  #message-page #composer {
+    border-top: 1px solid var(--border);
+  }
+
+  #message-page #composer div {
+    width: 100%;
+    max-width: unset;
+
+    display: flex;
+  }
+}
+
+@media (min-width: 700px) {
+  #message-page #composer .content-width-constraint,
+  #message-page #composer .input-width-constraint {
+    display: flex;
+    justify-content: flex-end;
+
+    width: 100%;
+    max-width: var(--max-content-width);
+  }
+
+  #message-page #composer .content-width-constraint {
+    max-width: var(--max-content-width);
+  }
+
+  #message-page #composer .input-width-constraint {
+    max-width: var(--max-input-width);
+  }
+}
+
+/* message */
 #message-page #message-container {
   display: flex;
   flex-direction: column;
+  align-items: center;
 
   padding: var(--content-padding);
   gap: var(--gap-between-tiles);
 
+  height: auto;
+  max-height: unset;
+
   scroll-behavior: smooth;
 }
+
+.message-bubble {
+  display: flex;
+  width: 100%;
+  max-width: var(--max-content-width);
+}
+
+.message-bubble > div {
+  display: flex;
+  flex-direction: column;
+
+  background-color: var(--surface);
+  padding: var(--control-padding);
+
+  width: 100%;
+  max-width: var(--max-input-width);
+}
+
+.message-bubble .timestamp,
+.message-bubble .sender-name {
+  font-size: 0.8rem;
+  opacity: 0.6;
+}
+
+.message-bubble .sender-name {
+  font-weight: bold;
+}
+
+.message-bubble[sentbyuser] {
+  justify-content: flex-end;
+}
+
+.message-bubble[sentbyuser] {
+  align-items: flex-end;
+}
+
+.message-bubble[sentbyuser] span {
+  text-align: right;
+}

src/View/ChatPages/messagePage.tsx

@@ -30,7 +30,7 @@ export function MessagePage(chatViewModel: ChatViewModel) {
     scrollDown();
   }
   chatViewModel.chatMessageViewModels.subscribeSilent(scrollDownIfApplicable);
-  setTimeout(() => scrollDown(), 100)
+  setTimeout(() => scrollDown(), 100);
 
   return (
     <div id="message-page">
@@ -40,21 +40,27 @@ export function MessagePage(chatViewModel: ChatViewModel) {
       <div class="content">
         {messageContainer}
         <div id="composer">
-          <input
-            bind:value={chatViewModel.composingMessage}
-            on:enter={chatViewModel.sendMessage}
-            placeholder={translations.chatPage.message.composerInputPlaceholder}
-          ></input>
-          <button
-            class="primary"
-            aria-label={
-              translations.chatPage.message.sendMessageButtonAudioLabel
-            }
-            on:click={chatViewModel.sendMessage}
-            toggle:disabled={chatViewModel.cannotSendMessage}
-          >
-            <span class="icon">send</span>
-          </button>
+          <div class="content-width-constraint">
+            <div class="input-width-constraint">
+              <input
+                bind:value={chatViewModel.composingMessage}
+                on:enter={chatViewModel.sendMessage}
+                placeholder={
+                  translations.chatPage.message.composerInputPlaceholder
+                }
+              ></input>
+              <button
+                class="primary"
+                aria-label={
+                  translations.chatPage.message.sendMessageButtonAudioLabel
+                }
+                on:click={chatViewModel.sendMessage}
+                toggle:disabled={chatViewModel.cannotSendMessage}
+              >
+                <span class="icon">send</span>
+              </button>
+            </div>
+          </div>
         </div>
       </div>
     </div>

src/View/Components/chatMessage.tsx

@@ -4,11 +4,17 @@ import ChatMessageViewModel from "../../Model/chatMessageViewModel";
 
 export function ChatMessage(chatMessageViewModel: ChatMessageViewModel) {
   return (
-    <div class="tile flex-no">
+    <div
+      class="message-bubble"
+      toggle:sentbyuser={chatMessageViewModel.sentByUser}
+    >
       <div>
-        <span>{chatMessageViewModel.sender}</span>
-        <b subscribe:innerText={chatMessageViewModel.body}></b>
-        <span>{chatMessageViewModel.dateSent}</span>
+        <span class="sender-name">{chatMessageViewModel.sender}</span>
+        <span
+          class="body"
+          subscribe:innerText={chatMessageViewModel.body}
+        ></span>
+        <span class="timestamp">{chatMessageViewModel.dateSent}</span>
       </div>
     </div>
   );