improve message page layout

dist/index.css

@@ -589,12 +589,15 @@ body[showing-chat] #chat-page-wrapper {
 #chat-page #main #message-page .content {
   padding: 0px;
   overflow: hidden;
-  display: grid;
-  --composer-height: var(--control-height);
-  grid-template-rows: 1fr calc(var(--composer-height) + var(--gap-between-tiles)) var(--safe-area-bottom);
+  display: flex;
+  position: relative;
 }
-#chat-page #main #message-page .content:has(.reply-preview-wrapper .reply-preview) {
-  --composer-height: calc( 2 * var(--control-height) + var(--gap-between-tiles) );
+#chat-page #main #message-page .content #message-container {
+  --message-container-padding: var(--control-height);
+  padding-bottom: calc(var(--message-container-padding) + var(--content-padding)) !important;
+}
+#chat-page #main #message-page .content:has(.reply-preview-wrapper .reply-preview) #message-container {
+  --message-container-padding: calc(2 * var(--control-height) + var(--gap-between-tiles));
 }
 #message-page #message-container {
   overflow: auto;
@@ -602,6 +605,10 @@ body[showing-chat] #chat-page-wrapper {
 #message-page #composer {
   display: flex;
   justify-content: center;
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
 }
 #message-page #composer input {
   margin: 0px;
@@ -630,7 +637,6 @@ body[showing-chat] #chat-page-wrapper {
   gap: var(--gap-between-tiles);
 }
 #message-page #composer .reply-preview-wrapper .reply-preview > div {
-  background: var(--surface);
   display: flex;
   align-items: center;
   gap: var(--text-gap);
@@ -639,7 +645,7 @@ body[showing-chat] #chat-page-wrapper {
 }
 @media (max-width: 700px) {
   #message-page #composer div {
-    width: 100%;
+    width: calc(100vw - var(--control-height));
     max-width: unset;
     display: flex;
   }

dist/index.js

@@ -4702,7 +4702,7 @@
 
   // src/View/Components/replyPreview.tsx
   function ReplyPreview(coreViewModel2, chatMessageViewModel) {
-    return /* @__PURE__ */ createElement("div", { class: "reply-preview slide-up" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", { class: "secondary" }, chatMessageViewModel.sender), /* @__PURE__ */ createElement("b", { class: "ellipsis", "subscribe:innerText": chatMessageViewModel.body })), /* @__PURE__ */ createElement(
+    return /* @__PURE__ */ createElement("div", { class: "reply-preview" }, /* @__PURE__ */ createElement("div", { class: "surface" }, /* @__PURE__ */ createElement("span", { class: "secondary" }, chatMessageViewModel.sender), /* @__PURE__ */ createElement("b", { class: "ellipsis", "subscribe:innerText": chatMessageViewModel.body })), /* @__PURE__ */ createElement(
       "button",
       {
         class: "standard square",

dist/styles.css

@@ -51,6 +51,8 @@ body {
     --surface-active: hsla(0, 0%, 5%, 15%);
     --surface-alt: hsla(0, 0%, 0%, 2%);
 
+    --blur: 70px;
+
     --border: hsla(0, 0%, 0%, 10%);
     --surface-border: #8d8d8d;
 
@@ -63,7 +65,7 @@ body {
     --text-error: #da1e28;
     --text-info: #0043ce;
 
-        --highlight-background: linear-gradient(45deg, hsl(30, 100%, 50%), hsl(40, 100%, 50%));
+    --highlight-background: linear-gradient(45deg, hsl(30, 100%, 50%), hsl(40, 100%, 50%));
     --highlight-color: black;
 
     --link: #0f62fe;
@@ -346,9 +348,15 @@ select {
 /* backdrop-filter */
 header,
 menu,
-.modal>div {
-    backdrop-filter: blur(70px);
-    -webkit-backdrop-filter: blur(70px);
+.modal>div,
+button,
+input,
+textarea,
+select,
+.surface,
+.surface-alt {
+    backdrop-filter: blur(var(--blur));
+    -webkit-backdrop-filter: blur(var(--blur));
 }
 
 /* border, outline, etc */