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;
-            margin: 7px 0;
+            font-size: 1em;
+            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 {