From f559275b1496a2a5207317c1f909716979a948f2 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Wed, 6 Dec 2017 11:28:12 -0500
Subject: [PATCH] FIX: Adjusted the composer preview to avoid odd scroll issue

---
 .../components/composer-editor.js.es6         |  4 ++--
 app/assets/stylesheets/common/d-editor.scss   | 22 ++++++++++---------
 app/assets/stylesheets/desktop/compose.scss   |  8 +++----
 app/assets/stylesheets/mobile/compose.scss    |  3 ++-
 4 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/app/assets/javascripts/discourse/components/composer-editor.js.es6 b/app/assets/javascripts/discourse/components/composer-editor.js.es6
index ae3eea03a62..9aefd5feb5f 100644
--- a/app/assets/javascripts/discourse/components/composer-editor.js.es6
+++ b/app/assets/javascripts/discourse/components/composer-editor.js.es6
@@ -75,7 +75,7 @@ export default Ember.Component.extend({
   _composerEditorInit() {
     const topicId = this.get('topic.id');
     const $input = this.$('.d-editor-input');
-    const $preview = this.$('.d-editor-preview');
+    const $preview = this.$('.d-editor-preview-wrapper');
 
     $input.autocomplete({
       template: findRawTemplate('user-selector-autocomplete'),
@@ -180,7 +180,7 @@ export default Ember.Component.extend({
   },
 
   _teardownInputPreviewSync() {
-    [this.$('.d-editor-input'), this.$('.d-editor-preview')].forEach($element => {
+    [this.$('.d-editor-input'), this.$('.d-editor-preview-wrapper')].forEach($element => {
       $element.off("mouseenter touchstart");
       $element.off("scroll");
     });
diff --git a/app/assets/stylesheets/common/d-editor.scss b/app/assets/stylesheets/common/d-editor.scss
index 9b3566732e6..025f0acc154 100644
--- a/app/assets/stylesheets/common/d-editor.scss
+++ b/app/assets/stylesheets/common/d-editor.scss
@@ -64,7 +64,6 @@
   margin-left: 1%;
   display: flex;
   flex-direction: column;
-  background: $secondary;
 }
 
 .d-editor-button-bar {
@@ -101,11 +100,15 @@
   display: inline-block;
 }
 
+.d-editor-preview-wrapper {
+  overflow: auto;
+  cursor: default;
+}
+
 .d-editor-input,
 .d-editor-preview {
   box-sizing: border-box;
   flex: 1 1 100%;  
-  height: 100%;
   width: 100%;  
   margin: 0;
   min-height: auto;
@@ -119,22 +122,21 @@
   }
 }
 
-.d-editor-plugin {
-  display: flex;
-  overflow: auto;
-}
-
 .d-editor-input {
   border: 0;
   padding: 10px;
+  height: 100%;
   overflow-x: hidden;
-  resize: none;  
+  resize: none; 
 }
 
 .d-editor-preview {
+  height: auto;
+}
+
+.d-editor-plugin {
+  display: flex;
   overflow: auto;
-  cursor: default;
-  padding: 0 10px;
 }
 
 .composing-whisper .d-editor-preview {
diff --git a/app/assets/stylesheets/desktop/compose.scss b/app/assets/stylesheets/desktop/compose.scss
index 35499fe0edb..4a8dee02ca1 100644
--- a/app/assets/stylesheets/desktop/compose.scss
+++ b/app/assets/stylesheets/desktop/compose.scss
@@ -17,21 +17,19 @@
 }
 
 .edit-title {
-  .d-editor-preview {
+  .d-editor-preview-wrapper {
     margin-top: -43px;
   }
   &:not(.private-message) {
-    .d-editor-preview {
+    .d-editor-preview-wrapper {
       @media screen and (max-width: 955px) {
         margin-top: -79px;
       }
     }
   }
   
-  
-  
   .with-tags {
-    .d-editor-preview {
+    .d-editor-preview-wrapper {
       margin-top: -79px;
       @media screen and (max-width: 900px) {
         margin-top: -116px;
diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss
index 123a7eb42db..2c9babdba71 100644
--- a/app/assets/stylesheets/mobile/compose.scss
+++ b/app/assets/stylesheets/mobile/compose.scss
@@ -89,9 +89,10 @@
         background-color: $secondary;
         max-width: 100%;
         margin: 0;
+        padding: 10px;
+        overflow: auto;        
         .d-editor-preview {
           margin-bottom: 40px;
-          overflow: auto;
         }
       }
       .btn.hide-preview {