improve messagePage

dist/index.css

@@ -360,8 +360,8 @@ body[showing-chat] #chat-page-wrapper {
   overflow: auto;
 }
 #message-page #composer {
-  border-top: 1px solid var(--border);
   display: flex;
+  justify-content: center;
 }
 #message-page #composer input {
   margin: 0px;
@@ -369,13 +369,71 @@ body[showing-chat] #chat-page-wrapper {
   max-width: unset;
   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-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/Components/chatEntry.css */
 .chat-entry {