1 files changed, 62 insertions, 7 deletions

diff --git a/webapp/sass/layout/_webhooks.scss b/webapp/sass/layout/_webhooks.scss
index 904c50ccc..f3a8c6fd3 100644
--- a/webapp/sass/layout/_webhooks.scss
+++ b/webapp/sass/layout/_webhooks.scss
@@ -38,6 +38,9 @@
 
 .post {
     .attachment {
+        &.attachment--opengraph {
+            max-width: 800px;
+        }
         .attachment__content {
             border-radius: 4px;
             border-style: solid;
@@ -68,11 +71,29 @@
             &.attachment__container--danger {
                 border-left-color: #e40303;
             }
+            &.attachment__container--opengraph {
+                display: table;
+                table-layout: fixed;
+                width: 100%;
+                margin: 0;
+                padding-bottom: 13px;
+                div {
+                    margin: 0;
+                }
+            }
             .sitename {
                 color: #A3A3A3;
             }
         }
 
+        .attachment__body__wrap {
+            &.attachment__body__wrap--opengraph {
+                display: table-cell;
+                width: 100%;
+                vertical-align: top;
+            }
+        }
+
         .attachment__body {
             float: left;
             overflow-x: auto;
@@ -83,13 +104,11 @@
             &.attachment__body--no_thumb {
                 width: 100%;
             }
-            .attachment__image {
-                margin-bottom: 0;
-                max-height: 150px;
-                max-width: 150px;
-                &.loading {
-                    height: 150px;
-                }
+            &.attachment__body--opengraph {
+                float: none;
+                padding-right: 0;
+                width: 100%;
+                word-wrap: break-word;
             }
         }
 
@@ -97,10 +116,38 @@
             display: inline-block;
         }
 
+        .attachment__image__container--openraph {
+            display: table-cell;
+            vertical-align: top;
+            padding-top: 3px;
+            padding-left: 15px;
+        }
+
         .attachment__image {
             margin-bottom: 1em;
             max-height: 300px;
             max-width: 500px;
+
+            &.attachment__image--openraph {
+                margin-bottom: 0;
+                max-height: 80px;
+                max-width: 200px;
+
+                &.loading {
+                    height: 80px;
+                }
+
+                &.large_image {
+                    border-radius: 3px;
+                    margin-top: 10px;
+                    max-height: 200px;
+                    max-width: 400px;
+
+                    &.loading {
+                        height: 150px;
+                    }
+                }
+            }
         }
 
         .attachment__author-name {
@@ -121,6 +168,14 @@
                 overflow: hidden;
                 white-space: nowrap;
             }
+
+            &.attachment__title--opengraph {
+                height: auto;
+                word-wrap: break-word;
+                &.is-url {
+                    word-break: break-all
+                }
+            }
         }
 
         .attachment-link-more {