fix: messages UI/UX improvement (#4173)

framework/core/less/admin.less

@@ -1,5 +1,6 @@
 @import "common/common";
 
+@import "admin/AdminPage";
 @import "admin/AdminHeader";
 @import "admin/AdminNav";
 @import "admin/AdvancedPage";

framework/core/less/admin/AdminPage.less

@@ -0,0 +1,3 @@
+.AdminPage {
+  padding-bottom: var(--page-bottom-padding);
+}

framework/core/less/common/App.less

@@ -1,7 +1,7 @@
 .App {
   position: relative !important;
   padding-top: var(--header-height);
-  padding-bottom: 50px;
+  padding-bottom: var(--app-bottom-padding);
   min-height: 100vh;
 
   @media @phone {
@@ -325,7 +325,6 @@
   .App-content {
     background: var(--body-bg);
     width: 100%;
-    min-height: 100vh;
-    padding-bottom: 50px;
+    min-height: calc(~"100vh - var(--header-height-phone)");
   }
 }

framework/core/less/common/root.less

@@ -255,6 +255,8 @@
   --zindex-alerts:                 @zindex-alerts;
   --zindex-tooltip:                @zindex-tooltip;
 
+  --page-bottom-padding:            100px;
+
   // Store the current responsive screen mode in a CSS variable, to make it
   // available to the JS code.
   --flarum-screen:                 none;

framework/core/less/forum/PageStructure.less

@@ -21,6 +21,7 @@
   --content-width: 100%;
   --sidebar-width: 190px;
   --gap: 50px;
+  padding-bottom: var(--page-bottom-padding);
 
   &-container {
     gap: var(--gap);

framework/core/less/forum/Post.less

@@ -429,7 +429,7 @@
   cursor: text;
   overflow: hidden;
   margin-top: 50px;
-  margin-left: calc(0px - var(--post-padding));
+  margin-left: 0;
   padding-left: var(--post-padding);
   border: 2px dashed var(--control-bg);
   color: var(--muted-color);
@@ -439,7 +439,7 @@
   appearance: none;
   -webkit-appearance: none;
   text-align: left;
-  width: calc(100% + var(--post-padding));
+  width: 100%;
 
   .Post-container {
     display: grid;
@@ -469,6 +469,8 @@
   .ReplyPlaceholder {
     border-color: transparent;
     transition: border-color 0.2s;
+    margin-left: calc(0px - var(--post-padding));
+    width: calc(100% + var(--post-padding));
 
     .Post-header {
       position: relative;

framework/core/less/forum/PostStream.less

@@ -50,12 +50,12 @@
   text-transform: uppercase;
   font-weight: bold;
   color: var(--muted-color);
-  padding: 20px 20px 20px calc(~"var(--avatar-column-width) + 20px");
+  padding: 20px 20px 20px var(--avatar-column-width);
   font-size: 12px;
 
   @media @phone {
-    margin: 0 -15px;
-    padding: 20px 15px;
+    margin: 0;
+    padding: 20px 0;
   }
 }