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

webapp/components/code_preview.jsx

@@ -118,6 +118,7 @@ export default class CodePreview extends React.Component {
                 <span className='post-code__language'>
                     {`${this.props.fileInfo.name} - ${language}`}
                 </span>
+                <div className='post-code__container'>
                     <code className='hljs'>
                         <table>
                             <tbody>
@@ -129,6 +130,7 @@ export default class CodePreview extends React.Component {
                         </table>
                     </code>
                 </div>
+            </div>
         );
     }
 }

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 = (

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 text-center'>
-                        <div className='more-modal__details'>
                             <div
                                 className='more-modal__name'
                             >

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;

webapp/sass/layout/_forms.scss

@@ -71,7 +71,7 @@
 
     .form__label {
         &.control-label {
-            color: inherit;
+            color: inherit !important;
         }
     }
 

webapp/sass/layout/_headers.scss

@@ -26,6 +26,12 @@
         display: inline;
     }
 
+    .member-popover__trigger {
+        & + div {
+            display: none;
+        }
+    }
+
     .member-popover__trigger {
         .fa {
             margin-left: 4px;

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 {

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;
             }

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;

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;
+                                }
                             }
                         }