diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index f1c7b9c4da..c815aade5b 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -221,7 +221,7 @@ $mobile-breakpoint: 700px;
     h3 {
       font-weight: normal;
       font-size: $font-0;
-      @include breakpoint(mobile) {
+      @include breakpoint(mobile-extra-large) {
         word-wrap: break-word;
       }
     }
@@ -233,7 +233,7 @@ $mobile-breakpoint: 700px;
       @include breakpoint(medium, min-width) {
         max-height: 100px;
       }
-      @include breakpoint(mobile) {
+      @include breakpoint(mobile-extra-large) {
         word-wrap: break-word;
       }
       color: $primary-medium;
@@ -248,7 +248,7 @@ $mobile-breakpoint: 700px;
     .title {
       margin-bottom: 1em;
     }
-    @include breakpoint(mobile) {
+    @include breakpoint(mobile-extra-large) {
       .title {
         word-wrap: break-word;
       }
@@ -535,7 +535,7 @@ $mobile-breakpoint: 700px;
     padding: 10px;
     display: flex;
     align-items: center;
-    @include breakpoint(mobile) {
+    @include breakpoint(mobile-extra-large) {
       margin: 0 -10px;
     }
     label {
diff --git a/app/assets/stylesheets/common/admin/admin_intro.scss b/app/assets/stylesheets/common/admin/admin_intro.scss
index f0a7ad156d..bdf3baa14d 100644
--- a/app/assets/stylesheets/common/admin/admin_intro.scss
+++ b/app/assets/stylesheets/common/admin/admin_intro.scss
@@ -31,7 +31,7 @@
     margin-bottom: 5px;
   }
 
-  @include breakpoint(mobile) {
+  @include breakpoint(mobile-extra-large) {
     width: 100%;
     margin: 2em 0;
     .content-wrapper {
diff --git a/app/assets/stylesheets/common/admin/api.scss b/app/assets/stylesheets/common/admin/api.scss
index 2bfb63ac06..bddfdfcda4 100644
--- a/app/assets/stylesheets/common/admin/api.scss
+++ b/app/assets/stylesheets/common/admin/api.scss
@@ -31,7 +31,7 @@ table.web-hooks.grid {
       }
     }
   }
-  @include breakpoint(mobile) {
+  @include breakpoint(mobile-extra-large) {
     tbody {
       tr {
         grid-template-columns: 0.5fr 1fr;
@@ -159,7 +159,7 @@ table.api-keys {
 
     .hook-event {
       margin-bottom: 0.5em;
-      @include breakpoint(mobile) {
+      @include breakpoint(mobile-extra-large) {
         width: 100%;
       }
     }
diff --git a/app/assets/stylesheets/common/admin/backups.scss b/app/assets/stylesheets/common/admin/backups.scss
index 51fc9f46e5..b5d8658639 100644
--- a/app/assets/stylesheets/common/admin/backups.scss
+++ b/app/assets/stylesheets/common/admin/backups.scss
@@ -45,7 +45,7 @@ $rollback-darker: darken($rollback, 20%) !default;
         }
       }
     }
-    @include breakpoint(mobile) {
+    @include breakpoint(mobile-extra-large) {
       td.backup-filename {
         grid-column-start: 1;
         grid-column-end: 3;
diff --git a/app/assets/stylesheets/common/admin/plugins.scss b/app/assets/stylesheets/common/admin/plugins.scss
index cedcc9dcc6..ae8580d0d8 100644
--- a/app/assets/stylesheets/common/admin/plugins.scss
+++ b/app/assets/stylesheets/common/admin/plugins.scss
@@ -12,7 +12,7 @@
         grid-template-columns: 0.25fr repeat(4, 1fr);
       }
     }
-    @include breakpoint(mobile) {
+    @include breakpoint(mobile-extra-large) {
       tr {
         grid-template-columns: 0.25fr repeat(3, 1fr);
       }
diff --git a/app/assets/stylesheets/common/admin/staff_logs.scss b/app/assets/stylesheets/common/admin/staff_logs.scss
index cfe23babf2..bbfd6ae888 100644
--- a/app/assets/stylesheets/common/admin/staff_logs.scss
+++ b/app/assets/stylesheets/common/admin/staff_logs.scss
@@ -116,7 +116,7 @@
     }
   }
 
-  @include breakpoint(mobile) {
+  @include breakpoint(mobile-extra-large) {
     table.staff-logs tr {
       grid-template-columns: 1fr 1fr 0.5fr;
       td.staff-users {
@@ -433,7 +433,7 @@ table.search-logs-list {
       }
     }
   }
-  @include breakpoint(mobile) {
+  @include breakpoint(mobile-extra-large) {
     tr {
       td.term {
         grid-column-start: 1;
diff --git a/app/assets/stylesheets/common/base/cat_reorder.scss b/app/assets/stylesheets/common/base/cat_reorder.scss
index 7aadd61dde..88ea3c7e5c 100644
--- a/app/assets/stylesheets/common/base/cat_reorder.scss
+++ b/app/assets/stylesheets/common/base/cat_reorder.scss
@@ -6,7 +6,7 @@
   }
   input {
     width: 4em;
-    @include breakpoint(mobile) {
+    @include breakpoint(mobile-extra-large) {
       width: 2em;
     }
   }
@@ -22,7 +22,7 @@
   }
   .badge-wrapper span.badge-category {
     max-width: 20em;
-    @include breakpoint(mobile) {
+    @include breakpoint(mobile-extra-large) {
       max-width: 30vw;
     }
   }
diff --git a/app/assets/stylesheets/common/base/user-badges.scss b/app/assets/stylesheets/common/base/user-badges.scss
index 42f7f6eae9..fcf42d85d7 100644
--- a/app/assets/stylesheets/common/base/user-badges.scss
+++ b/app/assets/stylesheets/common/base/user-badges.scss
@@ -218,7 +218,7 @@
         margin-right: 0;
       }
     }
-    @include breakpoint(mobile) {
+    @include breakpoint(mobile-extra-large) {
       flex: 0 0 100%;
     }
     &:hover {
diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss
index 9eae0cea53..cfac1c76ea 100644
--- a/app/assets/stylesheets/common/base/user.scss
+++ b/app/assets/stylesheets/common/base/user.scss
@@ -552,7 +552,7 @@
       }
     }
     .select-kit.multi-select {
-      @include breakpoint(mobile) {
+      @include breakpoint(mobile-extra-large) {
         width: 100%;
       }
     }
diff --git a/app/assets/stylesheets/common/d-editor.scss b/app/assets/stylesheets/common/d-editor.scss
index 2901d6b40d..4937bc71fc 100644
--- a/app/assets/stylesheets/common/d-editor.scss
+++ b/app/assets/stylesheets/common/d-editor.scss
@@ -76,22 +76,31 @@
   display: flex;
   align-items: center;
   min-height: 30px;
-  padding-left: 3px;
   border-bottom: 1px solid $primary-low;
 
   .btn,
   .btn-default {
     background-color: transparent;
-    padding: 4px 8px;
     display: inline-block;
     .d-icon {
       color: $primary-medium;
     }
-    @media all and (max-width: 800px) {
-      padding: 5px;
+
+    svg {
+      -webkit-transform: translate3d(
+        0,
+        0,
+        0
+      ); // Hack: Reduces composer icon jitter while scrolling in Safari on iOS12
     }
   }
 
+  .d-editor-spacer {
+    height: 1em;
+    display: inline-block;
+    border-left: 1px solid $primary-low-mid;
+  }
+
   .btn:not(.no-text) {
     font-size: $font-up-1;
   }
@@ -105,13 +114,6 @@
   }
 }
 
-.d-editor-spacer {
-  height: 16px;
-  margin: 0 5px;
-  display: inline-block;
-  border-left: 1px solid $primary-low-mid;
-}
-
 .d-editor-preview-wrapper {
   overflow: auto;
   cursor: default;
@@ -181,9 +183,6 @@
   .d-editor-textarea-wrapper {
     border: 1px solid $primary-low;
   }
-  .d-editor-button-bar .btn {
-    padding: 6px 8px;
-  }
   .d-editor-preview-wrapper {
     max-width: 100%;
     margin: 10px 0 0 0;
@@ -261,3 +260,90 @@
 .mobile-view .d-editor-preview .image-wrapper .button-wrapper {
   opacity: 1;
 }
+
+// d-editor bar button sizing for all editors - this is kept seprate to keep
+// everything in one place
+.d-editor-button-bar {
+  margin: 0.25em;
+
+  // shared styles for all font sizes
+  .btn,
+  .btn-default {
+    padding: 0 0.5em;
+  }
+  .d-editor-spacer {
+    margin: 0 0.25em;
+  }
+
+  // small text size
+  .text-size-smaller & {
+    @include breakpoint(mobile-large) {
+      .btn,
+      .btn-default {
+        padding: 0 0.4em;
+      }
+    }
+    @include breakpoint(mobile-medium) {
+      .btn,
+      .btn-default {
+        padding: 0 0.3em;
+      }
+      .d-editor-spacer {
+        margin: 0 0.25em;
+      }
+    }
+  }
+
+  // normal text size
+  .text-size-normal & {
+    @include breakpoint(mobile-large) {
+      .btn,
+      .btn-default {
+        padding: 0 0.35em;
+      }
+    }
+    @include breakpoint(mobile-medium) {
+      .btn,
+      .btn-default {
+        padding: 0 0.25em;
+      }
+    }
+  }
+
+  // larger text size
+  .text-size-larger & {
+    @include breakpoint(mobile-large) {
+      .btn,
+      .btn-default {
+        padding: 0 0.3em;
+      }
+    }
+    @include breakpoint(mobile-medium) {
+      .btn,
+      .btn-default {
+        padding: 0 0.2em;
+      }
+    }
+  }
+
+  // largest text size
+  .text-size-largest & {
+    .btn,
+    .btn-default {
+      font-size: $font-down-1;
+    }
+
+    @include breakpoint(mobile-large) {
+      .btn,
+      .btn-default {
+        padding: 0 0.3em;
+      }
+    }
+    @include breakpoint(mobile-medium) {
+      .btn,
+      .btn-default {
+        padding: 0 0.2em;
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/common/foundation/mixins.scss b/app/assets/stylesheets/common/foundation/mixins.scss
index cdee8c5ba8..8a83dd6c78 100644
--- a/app/assets/stylesheets/common/foundation/mixins.scss
+++ b/app/assets/stylesheets/common/foundation/mixins.scss
@@ -8,7 +8,8 @@
 $breakpoints: (
   mobile-small: 320px,
   mobile-medium: 350px,
-  mobile: 550px,
+  mobile-large: 450px,
+  mobile-extra-large: 550px,
   tablet: 768px,
   medium: 850px,
   large: 1000px,
diff --git a/app/assets/stylesheets/desktop/modal.scss b/app/assets/stylesheets/desktop/modal.scss
index 91b81a66f0..861c62442d 100644
--- a/app/assets/stylesheets/desktop/modal.scss
+++ b/app/assets/stylesheets/desktop/modal.scss
@@ -89,7 +89,7 @@
         max-width: 48%;
       }
 
-      @include breakpoint(mobile) {
+      @include breakpoint(mobile-extra-large) {
         flex: 1 1 auto;
         min-width: 49%;
         max-width: unset;
diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss
index 6e43a1496e..f9da09f0ad 100644
--- a/app/assets/stylesheets/mobile/compose.scss
+++ b/app/assets/stylesheets/mobile/compose.scss
@@ -29,6 +29,23 @@
     .reply-details {
       max-width: calc(100% - 75px);
     }
+
+    // Protection for languages with long strings on very small screens. This
+    // has no effect on most users but we need it for some cases. If this is
+    // not added, "add edit reason" will overlap with the composer controls
+    @include breakpoint(mobile-small) {
+      .reply-details {
+        flex-wrap: wrap;
+      }
+
+      .display-edit-reason {
+        margin-top: 0.5em;
+      }
+
+      .composer-controls {
+        align-self: flex-start;
+      }
+    }
   }
 
   .toggler {
@@ -141,17 +158,6 @@
   }
 
   .d-editor-button-bar .btn {
-    svg {
-      -webkit-transform: translate3d(
-        0,
-        0,
-        0
-      ); // Hack: Reduces composer icon jitter while scrolling in Safari on iOS12
-    }
-    @include breakpoint(mobile-medium) {
-      padding: 4px;
-      font-size: 0.96em;
-    }
     &.preview {
       margin: 0;
     }