UX: Mobile - fix editor button space, divider, extra upload icon

app/assets/javascripts/discourse/components/composer-editor.js.es6

@@ -963,7 +963,11 @@ export default Ember.Component.extend({
         unshift: true
       });
 
-      if (this.get("allowUpload") && this.get("uploadIcon")) {
+      if (
+        this.get("allowUpload") &&
+        this.get("uploadIcon") &&
+        !this.site.mobileView
+      ) {
         toolbar.addButton({
           id: "upload",
           group: "insertions",

app/assets/stylesheets/common/admin/customize.scss

@@ -699,7 +699,7 @@
     }
   }
 
-  @media screen and (max-width: 350px) {
+  @include breakpoint(mobile-medium) {
     table.grid tr {
       grid-template-columns: repeat(2, 1fr);
       td.controls {

app/assets/stylesheets/common/base/menu-panel.scss

@@ -285,7 +285,7 @@ div.menu-links-header {
     overflow: hidden;
     text-overflow: ellipsis;
     margin: -0.5em 0;
-    @media screen and (max-width: 350px) {
+    @include breakpoint(mobile-medium) {
       max-width: 125px;
     }
   }

app/assets/stylesheets/common/d-editor.scss

@@ -106,11 +106,10 @@
 }
 
 .d-editor-spacer {
-  width: 1px;
+  height: 16px;
-  height: 20px;
   margin: 0 5px;
-  background-color: $primary-low;
   display: inline-block;
+  border-left: 1px solid $primary-low-mid;
 }
 
 .d-editor-preview-wrapper {

app/assets/stylesheets/common/foundation/mixins.scss

@@ -7,6 +7,7 @@
 
 $breakpoints: (
   mobile-small: 320px,
+  mobile-medium: 350px,
   mobile: 550px,
   tablet: 768px,
   medium: 850px,

app/assets/stylesheets/mobile/compose.scss

@@ -134,8 +134,9 @@
         0
       ); // Hack: Reduces composer icon jitter while scrolling in Safari on iOS12
     }
-    @media all and (max-width: 350px) {
+    @include breakpoint(mobile-medium) {
-      padding: 2px 4px;
+      padding: 4px;
+      font-size: 0.96em;
     }
     &.preview {
       margin: 0;