Ui improvements (#5755)

* PLT-5816 - Flagged posts tooltip fix

* PLT-5766 - Link previews appearing outside the box

* PLT-5795 - Fixing alignment user list in channel

* PLT-5818 - Reset password error not aligned

* PLT-5837 - Adjusting image preview max height

* PLT-5778 - Updating word break for paragraphs

* PLT-5848 - Updating label for file error

* PLT-5846 - Markdown tables extra border on mobile

* PLT-5662 - Pinned post UI improvement

* Fixing eslint error

* Updating tooltip eslint issue

* PLT-5832 - Removing error styling on labels

webapp/sass/components/_modal.scss

@@ -345,7 +345,7 @@
                 }
 
                 img {
-                    max-height: 100%;
+                    max-height: calc(100vh - 200px);
                     max-width: 100%;
                 }
 

webapp/sass/components/_popover.scss

@@ -209,6 +209,15 @@
         .more-modal__row {
             min-height: inherit;
         }
+
+        .more-modal__details {
+            line-height: 32px;
+        }
+
+        .more-modal__actions {
+            line-height: 31px;
+            margin: 0;
+        }
     }
 
     .popover-content {

webapp/sass/components/_tooltip.scss

@@ -7,6 +7,12 @@
         padding: 3px 10px 4px;
         word-break: break-word;
     }
+
+    &.text-nowrap {
+        .tooltip-inner {
+            white-space: nowrap;
+        }
+    }
 }
 
 #webrtcTooltip {

webapp/sass/layout/_forms.scss

@@ -62,7 +62,6 @@
 
 .has-error {
     .help-block,
-    .control-label,
     .radio,
     .checkbox,
     .radio-inline,
@@ -70,6 +69,10 @@
         color: $red;
     }
 
+    .control-label {
+        color: inherit;
+    }
+
     &.radio,
     &.checkbox,
     &.radio-inline,

webapp/sass/layout/_headers.scss

@@ -9,10 +9,10 @@
 
     .member-popover__trigger,
     .pinned-posts-button {
-        display: inline-block;
-        min-width: 30px;
         cursor: pointer;
-        margin-left: 10px;
+        display: inline-block;
+        margin-left: 7px;
+        min-width: 30px;
         text-align: center;
         white-space: nowrap;
 
@@ -65,7 +65,7 @@
         }
 
         &:last-child {
-            padding-right: 8px;
+            padding-right: 6px;
             width: 8.9%;
         }
     }

webapp/sass/layout/_post.scss

@@ -359,6 +359,10 @@
 }
 
 .post-create__container {
+    label {
+        font-weight: normal;
+    }
+
     form {
         margin: 0 auto;
         padding: .5em 15px 0;
@@ -523,6 +527,7 @@
             .col__reply {
                 min-width: 0;
             }
+
             .dropdown {
                 margin-right: 0;
             }
@@ -749,6 +754,7 @@
         line-height: 1.6em;
         margin: 0;
         white-space: pre-wrap;
+        word-break: break-word;
     }
 
     .post__header--info {
@@ -786,7 +792,7 @@
 
             .flag-icon__container {
                 left: 36px;
-                margin-left: 5px;
+                margin-left: 7px;
                 position: absolute;
                 top: 8px;
             }
@@ -1358,6 +1364,8 @@
 
 .post__pinned-badge {
     margin-left: 7px;
+    position: relative;
+    top: -1px;
 }
 
 .permalink-text {

webapp/sass/layout/_webhooks.scss

@@ -41,6 +41,7 @@
         &.attachment--opengraph {
             max-width: 800px;
         }
+
         .attachment__content {
             border-radius: 4px;
             border-style: solid;
@@ -71,16 +72,18 @@
             &.attachment__container--danger {
                 border-left-color: #e40303;
             }
+
             &.attachment__container--opengraph {
                 display: table;
-                table-layout: fixed;
-                width: 100%;
                 margin: 0;
                 padding-bottom: 13px;
+                width: 100%;
+
                 div {
                     margin: 0;
                 }
             }
+
             .sitename {
                 color: #A3A3A3;
             }
@@ -89,8 +92,8 @@
         .attachment__body__wrap {
             &.attachment__body__wrap--opengraph {
                 display: table-cell;
-                width: 100%;
                 vertical-align: top;
+                width: 100%;
             }
         }
 
@@ -104,6 +107,7 @@
             &.attachment__body--no_thumb {
                 width: 100%;
             }
+
             &.attachment__body--opengraph {
                 float: none;
                 padding-right: 0;
@@ -142,6 +146,7 @@
                     margin-top: 10px;
                     max-height: 200px;
                     max-width: 400px;
+                    width: 100%;
 
                     &.loading {
                         height: 150px;
@@ -164,16 +169,17 @@
 
             &.has-link {
                 color: #2f81b7;
-                text-overflow: ellipsis;
                 overflow: hidden;
+                text-overflow: ellipsis;
                 white-space: nowrap;
             }
 
             &.attachment__title--opengraph {
                 height: auto;
                 word-wrap: break-word;
+
                 &.is-url {
-                    word-break: break-all
+                    word-break: break-all;
                 }
             }
         }

webapp/sass/responsive/_mobile.scss

@@ -1,6 +1,10 @@
 @charset 'UTF-8';
 
 @media screen and (max-width: 768px) {
+    .table-responsive {
+        border: none;
+    }
+
     .multi-select__container {
         .btn {
             display: block;
@@ -1336,7 +1340,7 @@
 
                 a {
                     border-bottom: 1px solid;
-                    line-height: 50px;
+                    line-height: 45px;
                     position: relative;
                     text-align: center;
                 }