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 */

src/View/ChatPages/messagePage.css

@@ -2,20 +2,18 @@
 #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 {
@@ -26,6 +24,11 @@
 #message-page #composer {
     display: flex;
     justify-content: center;
+
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
 }
 
 #message-page #composer input {
@@ -59,9 +62,7 @@
     gap: var(--gap-between-tiles);
 }
 
-#message-page #composer .reply-preview-wrapper .reply-preview > div {
-    background: var(--surface);
-
+#message-page #composer .reply-preview-wrapper .reply-preview>div {
     display: flex;
     align-items: center;
     gap: var(--text-gap);
@@ -73,13 +74,14 @@
 
 @media (max-width: 700px) {
     #message-page #composer div {
-        width: 100%;
+        width: calc(100vw - var(--control-height));
         max-width: unset;
         display: flex;
     }
 }
 
 @media (min-width: 700px) {
+
     #message-page #composer .content-width-constraint,
     #message-page #composer .input-width-constraint {
         display: flex;
@@ -225,7 +227,7 @@
     text-align: right;
 }
 
-.message-bubble > .inline-reply {
+.message-bubble>.inline-reply {
     cursor: pointer;
 
     display: flex;
@@ -244,7 +246,7 @@
     border-left: var(--outline-width) solid var(--primary);
 }
 
-.message-bubble > .message-reaction-row {
+.message-bubble>.message-reaction-row {
     max-width: var(--max-input-width);
     width: 100%;
 
@@ -255,11 +257,11 @@
     overflow: hidden;
 }
 
-.message-bubble > .message-reaction-row:has(button:not([count="0"])) {
+.message-bubble>.message-reaction-row:has(button:not([count="0"])) {
     display: grid !important;
 }
 
-.message-bubble > .message-reaction-row button {
+.message-bubble>.message-reaction-row button {
     min-height: unset;
     height: 100%;
     width: 100%;
@@ -269,7 +271,7 @@
     animation: slide-up var(--animation-duration);
 }
 
-.message-bubble > .message-reaction-row button[count="0"] {
+.message-bubble>.message-reaction-row button[count="0"] {
     display: none;
 }
 
@@ -283,6 +285,7 @@
     }
 }
 
+
 .grid.message-reaction-filter {
     grid-template-columns: repeat(3, 1fr);
 }

src/View/Components/replyPreview.tsx

@@ -8,8 +8,8 @@ export function ReplyPreview(
     chatMessageViewModel: ChatMessageViewModel,
 ) {
     return (
-        <div class="reply-preview slide-up">
-            <div>
+        <div class="reply-preview">
+            <div class="surface">
                 <span class="secondary">{chatMessageViewModel.sender}</span>
                 <b class="ellipsis" subscribe:innerText={chatMessageViewModel.body}></b>
             </div>

src/ViewModel/Global/coreViewModel.ts

@@ -8,7 +8,7 @@ import FileTransferModel from "../../Model/Global/fileTransferModel";
 import { v4 } from "uuid";
 
 export default class CoreViewModel {
-    readonly BUILD = "Build 26.04.14.F";
+    readonly BUILD = "Build 26.04.14.G";
 
     translations: Translations;