diff --git a/app/assets/javascripts/discourse/components/composer-editor.js.es6 b/app/assets/javascripts/discourse/components/composer-editor.js.es6 index e477d520e2b..f28654a3fe2 100644 --- a/app/assets/javascripts/discourse/components/composer-editor.js.es6 +++ b/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", diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss index a5f6b9923a8..f93e7085046 100644 --- a/app/assets/stylesheets/common/admin/customize.scss +++ b/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 { diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss index 6f7e148e118..3c49e597ed1 100644 --- a/app/assets/stylesheets/common/base/menu-panel.scss +++ b/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; } } diff --git a/app/assets/stylesheets/common/d-editor.scss b/app/assets/stylesheets/common/d-editor.scss index 86e16bbb2f5..9c8216ce554 100644 --- a/app/assets/stylesheets/common/d-editor.scss +++ b/app/assets/stylesheets/common/d-editor.scss @@ -106,11 +106,10 @@ } .d-editor-spacer { - width: 1px; - height: 20px; + height: 16px; margin: 0 5px; - background-color: $primary-low; display: inline-block; + border-left: 1px solid $primary-low-mid; } .d-editor-preview-wrapper { diff --git a/app/assets/stylesheets/common/foundation/mixins.scss b/app/assets/stylesheets/common/foundation/mixins.scss index a4fa84fcd68..cdee8c5ba86 100644 --- a/app/assets/stylesheets/common/foundation/mixins.scss +++ b/app/assets/stylesheets/common/foundation/mixins.scss @@ -7,6 +7,7 @@ $breakpoints: ( mobile-small: 320px, + mobile-medium: 350px, mobile: 550px, tablet: 768px, medium: 850px, diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss index e8e75501f94..1fd0eb8052a 100644 --- a/app/assets/stylesheets/mobile/compose.scss +++ b/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) { - padding: 2px 4px; + @include breakpoint(mobile-medium) { + padding: 4px; + font-size: 0.96em; } &.preview { margin: 0;