UX: Mobile editor style fixes (#7878)

UX: Mobile editor style fixes (#7878)

diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index f1c7b9c..c815aad 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 f0a7ad1..bdf3baa 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 2bfb63a..bddfdfc 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 51fc9f4..b5d8658 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 cedcc9d..ae8580d 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 cfe23ba..bbfd6ae 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 7aadd61..88ea3c7 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 42f7f6e..fcf42d8 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 9eae0ce..cfac1c7 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 2901d6b..4937bc7 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 {

[... diff too long, it was truncated ...]

GitHub sha: fd4557a9