Multiple Ui fixes (#6272)

* PLT-6453 - Improving headings in the web app

* PLT-6414 - Fixing view members modal issue

* PLT-5863 - Fixing alignment in new channel menu

* PLT-6391 - Fixing code block overlay

10 files changed, 62 insertions, 16 deletions

diff --git a/webapp/components/code_preview.jsx b/webapp/components/code_preview.jsx
index 67088972a..a4a708adf 100644
--- a/webapp/components/code_preview.jsx
+++ b/webapp/components/code_preview.jsx
@@ -118,16 +118,18 @@ export default class CodePreview extends React.Component {
                 <span className='post-code__language'>
                     {`${this.props.fileInfo.name} - ${language}`}
                 </span>
-                <code className='hljs'>
-                    <table>
-                        <tbody>
-                            <tr>
-                                <td className='post-code__lineno'>{strlines}</td>
-                                <td dangerouslySetInnerHTML={{__html: highlighted}}/>
-                            </tr>
-                        </tbody>
-                    </table>
-                </code>
+                <div className='post-code__container'>
+                    <code className='hljs'>
+                        <table>
+                            <tbody>
+                                <tr>
+                                    <td className='post-code__lineno'>{strlines}</td>
+                                    <td dangerouslySetInnerHTML={{__html: highlighted}}/>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </code>
+                </div>
             </div>
         );
     }
diff --git a/webapp/components/new_channel_modal.jsx b/webapp/components/new_channel_modal.jsx
index 7f78c53c2..49103b7a8 100644
--- a/webapp/components/new_channel_modal.jsx
+++ b/webapp/components/new_channel_modal.jsx
@@ -113,7 +113,7 @@ export default class NewChannelModal extends React.Component {
         }
 
         if (this.props.serverError) {
-            serverError = <div className='form-group has-error'><p className='input__help error'>{this.props.serverError}</p></div>;
+            serverError = <div className='form-group has-error'><div className='col-sm-12'><p className='input__help error'>{this.props.serverError}</p></div></div>;
         }
 
         let createPublicChannelLink = (
diff --git a/webapp/components/popover_list_members/popover_list_members.jsx b/webapp/components/popover_list_members/popover_list_members.jsx
index e435126ff..cf6042943 100644
--- a/webapp/components/popover_list_members/popover_list_members.jsx
+++ b/webapp/components/popover_list_members/popover_list_members.jsx
@@ -177,8 +177,7 @@ export default class PopoverListMembers extends React.Component {
                         className='more-modal__row'
                         key={'popover-member-more'}
                     >
-                        <div className='col-sm-3'/>
-                        <div className='more-modal__details'>
+                        <div className='more-modal__details text-center'>
                             <div
                                 className='more-modal__name'
                             >
diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss
index 7e5d0cd3d..6e54d60ff 100644
--- a/webapp/sass/components/_modal.scss
+++ b/webapp/sass/components/_modal.scss
@@ -275,6 +275,10 @@
                 overflow-y: visible;
             }
 
+            .post-code__container {
+                overflow: auto;
+            }
+
             .modal-image__wrapper {
                 @include border-radius(3px);
                 display: table-cell;
diff --git a/webapp/sass/layout/_forms.scss b/webapp/sass/layout/_forms.scss
index c5f00c813..fe847d1d6 100644
--- a/webapp/sass/layout/_forms.scss
+++ b/webapp/sass/layout/_forms.scss
@@ -71,7 +71,7 @@
 
     .form__label {
         &.control-label {
-            color: inherit;
+            color: inherit !important;
         }
     }
 
diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss
index 6796570b6..000a7819e 100644
--- a/webapp/sass/layout/_headers.scss
+++ b/webapp/sass/layout/_headers.scss
@@ -27,6 +27,12 @@
     }
 
     .member-popover__trigger {
+        & + div {
+            display: none;
+        }
+    }
+
+    .member-popover__trigger {
         .fa {
             margin-left: 4px;
             position: relative;
diff --git a/webapp/sass/layout/_markdown.scss b/webapp/sass/layout/_markdown.scss
index 65f50b789..6fcbc7ff3 100644
--- a/webapp/sass/layout/_markdown.scss
+++ b/webapp/sass/layout/_markdown.scss
@@ -1,11 +1,36 @@
 @charset 'UTF-8';
 
+h1 {
+    font-size: 28px;
+}
+
+h2 {
+    font-size: 25px;
+}
+
+h3 {
+    font-size: 22px;
+}
+
+h4 {
+    font-size: 19px;
+}
+
+h5 {
+    font-size: 15px;
+}
+
+h6 {
+    font-size: 1em;
+}
+
 .markdown__link {
 }
 
 .markdown__heading {
     font-weight: 700;
     line-height: 1.5;
+    margin: 10px 0;
 }
 
 .markdown__paragraph-inline {
diff --git a/webapp/sass/layout/_post-right.scss b/webapp/sass/layout/_post-right.scss
index 4125d88fc..48fc57629 100644
--- a/webapp/sass/layout/_post-right.scss
+++ b/webapp/sass/layout/_post-right.scss
@@ -33,6 +33,7 @@
             .col__reply {
                 background: transparent !important;
                 border: none !important;
+                right: 5px;
                 text-align: right;
                 top: 0;
             }
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index 2766943af..4acf4dcf2 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -167,7 +167,7 @@
     text-align: center;
     top: 0;
     width: 100%;
-    z-index: 6;
+    z-index: 11;
 
     .overlay__indent {
         @include clearfix;
@@ -361,7 +361,7 @@
 .post-create__container {
     @include flex(0 0 auto);
     width: 100%;
-    z-index: 1000;
+    z-index: 9;
 
     label {
         font-weight: normal;
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 96fb86843..45707913c 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -727,8 +727,17 @@
                             z-index: 5;
 
                             .modal-title {
+                                max-width: 100%;
+                                padding: 0 40px;
                                 text-align: center;
                                 width: 100%;
+
+                                > span {
+                                    display: block;
+                                    overflow: hidden;
+                                    text-overflow: ellipsis;
+                                    white-space: nowrap;
+                                }
                             }
                         }