Merge branch 'feat/enhanced-link-edit-modal-for-master-merge' into feat/replace-perma-link

# Conflicts:
#	src/client/js/components/PageEditor/LinkEditModal.jsx

src/client/js/components/PageEditor/LinkEditModal.jsx

@@ -97,7 +97,6 @@ class LinkEditModal extends React.PureComponent {
       <div className="linkedit-preview">
         <Preview
           markdown={this.state.markdown}
-          inputRef={() => {}}
         />
       </div>
     );
@@ -197,6 +196,10 @@ class LinkEditModal extends React.PureComponent {
                 </div>
               </form>
 
+              <div className="d-block d-lg-none mb-3 overflow-auto">
+                {this.renderPreview()}
+              </div>
+
               <div className="card">
                 <div className="card-body">
                   <form className="form-group">
@@ -272,10 +275,9 @@ class LinkEditModal extends React.PureComponent {
                 </div>
               </div>
             </div>
-            <div className="col-12 col-lg-6">
-              <div className="d-block mb-3">
-                {this.renderPreview()}
-              </div>
+
+            <div className="col d-none d-lg-block pr-0 mr-3 overflow-auto">
+              {this.renderPreview()}
             </div>
           </div>
         </ModalBody>

src/client/styles/scss/_linkedit-preview.scss

@@ -1,15 +1,8 @@
-.linkedit-preview {
-  // same height as forms
-  height: 327.5px;
-  @include media-breakpoint-up(lg) {
-    position: relative;
-    height: 100%;
-  }
+.modal .modal-body .linkedit-preview {
+  height: 0;
+  padding-bottom: 50%;
 
   .page-editor-preview-body {
-    @include media-breakpoint-up(lg) {
-      position: absolute;
-    }
-    height: 100%;
+    overflow-y: unset;
   }
 }

src/client/styles/scss/theme/nature.scss

@@ -96,11 +96,6 @@ html[dark] {
   @import 'apply-colors';
   @import 'apply-colors-light';
 
-  // hljs
-  .hljs {
-    background-color: $bgcolor-inline-code;
-  }
-
   // Search Top
   .search-top {
     .btn-secondary.dropdown-toggle {