PLT-5868 - Redesigning compact view (#5821)

* PLT-5868 - Redesigning compact view

* Improvements to compact view

* Updating compact view

* Updating webhook styles

webapp/sass/layout/_post.scss

@@ -677,6 +677,18 @@
             .status {
                 visibility: hidden;
             }
+
+            > div {
+                margin-bottom: 0;
+            }
+        }
+
+        &.same--root {
+            &.same--user {
+                .post__header {
+                    height: 0;
+                }
+            }
         }
 
         .post__img {
@@ -728,19 +740,20 @@
         }
 
         .markdown__heading {
-            clear: both;
+            font-size: 1em;
-            margin: 7px 0;
+            margin: 0;
         }
 
         .post__header {
             height: 22px;
+            margin-bottom: 0;
         }
 
         .post__body {
             background: transparent !important;
-            line-height: 1.6;
+            line-height: 1.5;
             margin-top: -1px;
-            padding: 3px 0;
+            padding: 3px 0 0;
 
             .img-div {
                 max-height: 150px;
@@ -761,6 +774,14 @@
                 clear: both;
                 padding-left: 20px;
             }
+
+            div {
+                margin-bottom: 0;
+            }
+
+            .post-image__column {
+                margin: 3px 0;
+            }
         }
 
         .post-image__column {
@@ -853,6 +874,7 @@
         line-height: 1.6em;
         margin: 0;
         white-space: pre-wrap;
+        width: 100%;
         word-break: break-word;
     }
 

webapp/sass/layout/_webhooks.scss

@@ -74,12 +74,13 @@
             }
 
             &.attachment__container--opengraph {
-                padding-left: 5px;
-                border-left-style: none;
                 border-left-color: transparent;
+                border-left-style: none;
                 display: table;
                 margin: 0;
                 padding-bottom: 13px;
+                padding-left: 5px;
+                table-layout: fixed;
                 width: 100%;
 
                 div {
@@ -125,9 +126,10 @@
 
         .attachment__image__container--openraph {
             display: table-cell;
-            vertical-align: top;
-            padding-top: 3px;
             padding-left: 15px;
+            padding-top: 3px;
+            vertical-align: top;
+            width: 95px;
         }
 
         .attachment__image {

webapp/sass/responsive/_mobile.scss

@@ -257,6 +257,18 @@
         }
 
         &.post--compact {
+            .post__img {
+                padding-top: 0;
+            }
+
+            &.same--root {
+                &.same--user {
+                    .post__header {
+                        height: auto;
+                    }
+                }
+            }
+
             .status-wrapper {
                 &:after {
                     bottom: 3px;

webapp/sass/responsive/_tablet.scss

@@ -242,7 +242,7 @@
                     left: -79px;
                     position: absolute;
                     text-align: right;
-                    top: 6px;
+                    top: 3px;
                     width: 60px;
                 }
 
@@ -261,7 +261,7 @@
             }
 
             &:not(.post--thread) {
-                padding: 5px .5em 0 77px;
+                padding: 0 .5em 0 77px;
 
                 .post__link {
                     margin: 4px 0 7px;
@@ -271,7 +271,7 @@
                 span {
                     p {
                         &:last-child {
-                            margin-bottom: .3em;
+                            margin-bottom: 0;
                         }
                     }
                 }
@@ -336,7 +336,7 @@
             .flag-icon__container {
                 left: -21px;
                 position: absolute;
-                top: 7px;
+                top: 4px;
             }
 
             .sidebar--right & .flag-icon__container {
@@ -353,7 +353,7 @@
                     .flag-icon__container {
                         left: -19px;
                         position: absolute;
-                        top: 7px;
+                        top: 4px;
                     }
 
                     .post__header {
@@ -429,6 +429,7 @@
                         text-rendering: auto;
                         top: -2px;
                         width: 51px;
+
                         &:hover {
                             text-decoration: underline;
                         }