PLT-7323/PLT-7334 CSS fixes (#7155)

* PLT-7334 - Channel header cuts off list

* PLT-7323 - Fixing alignment for attachments

* PLT-7323 - Fixing close button for attachments

* Changed header description to use margin instead of padding

webapp/sass/layout/_headers.scss

@@ -175,9 +175,10 @@
     }
 
     .channel-header__description {
-        height: 35px;
+        height: 19px;
+        margin-top: 3px;
+        margin-bottom: 13px;
         overflow: hidden;
-        padding: 3px 0 0;
         position: relative;
         text-overflow: ellipsis;
         width: calc(100% - 18px);

webapp/sass/layout/_webhooks.scss

@@ -37,6 +37,16 @@
 }
 
 .post {
+    &.post--comment {
+        .attachment {
+            .attachment__body__wrap {
+                .btn-close {
+                    left: -11px;
+                }
+            }
+        }
+    }
+
     .attachment {
         margin-left: -20px;
         position: relative;
@@ -64,7 +74,7 @@
         .attachment__thumb-pretext {
             background: transparent;
             border: none;
-            margin-left: 5px;
+            margin-left: 25px;
         }
 
         .attachment__container {

webapp/utils/utils.jsx

@@ -588,7 +588,7 @@ export function applyTheme(theme) {
     if (theme.centerChannelBg) {
         changeCss('@media(min-width: 768px){.app__body .post:hover .post__header .col__reply, .app__body .post.post--hovered .post__header .col__reply', 'background:' + theme.centerChannelBg);
         changeCss('@media(max-width: 320px){.tutorial-steps__container', 'background:' + theme.centerChannelBg);
-        changeCss('.app__body .status-wrapper .status_dropdown__toggle .status .icon__container:after, .app__body .app__content, .app__body .markdown__table, .app__body .markdown__table tbody tr, .app__body .suggestion-list__content, .app__body .modal .modal-content, .app__body .modal .modal-footer, .app__body .post.post--compact .post-image__column, .app__body .suggestion-list__divider > span, .app__body .status-wrapper .status, .app__body .alert.alert-transparent', 'background:' + theme.centerChannelBg);
+        changeCss('.app__body .channel-header__info .channel-header__description:before, .app__body .status-wrapper .status_dropdown__toggle .status .icon__container:after, .app__body .app__content, .app__body .markdown__table, .app__body .markdown__table tbody tr, .app__body .suggestion-list__content, .app__body .modal .modal-content, .app__body .modal .modal-footer, .app__body .post.post--compact .post-image__column, .app__body .suggestion-list__divider > span, .app__body .status-wrapper .status, .app__body .alert.alert-transparent', 'background:' + theme.centerChannelBg);
         changeCss('#post-list .post-list-holder-by-time, .app__body .post .dropdown-menu a', 'background:' + theme.centerChannelBg);
         changeCss('#post-create', 'background:' + theme.centerChannelBg);
         changeCss('.app__body .date-separator .separator__text, .app__body .new-separator .separator__text', 'background:' + theme.centerChannelBg);