presentation for inline link

src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css

@@ -64,16 +64,14 @@ limitations under the License.
     margin-right: 95px;
 }
 
-/* all the overflow-y: hidden; are to trap Zalgos -
-   but they introduce an implicit overflow-x: auto.
-   so make that explicitly hidden too to avoid random
-   horizontal scrollbars occasionally appearing, like in
+/* Removed hidden overflow in order to have hanging elements
+   in the message stream gutters. This may re-introduce
    https://github.com/vector-im/vector-web/issues/1154
-    */
+*/
 .mx_EventTile_content {
     display: block;
-    overflow-y: hidden;
-    overflow-x: hidden;
+    /*overflow-y: hidden;
+    overflow-x: hidden;*/
 }
 
 /* Various markdown overrides */

src/skins/vector/css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css

@@ -15,51 +15,47 @@ limitations under the License.
 */
 
 .mx_LinkPreviewWidget {
+    position: relative;
     margin-top: 15px;
-    margin-right: 15px;
-    margin-bottom: 15px;
-    display: -webkit-flex;
-    display: flex;
-    border-left: 4px solid #ddd;
-    color: #888;
 }
 
-.mx_LinkPreviewWidget_image {
-    -webkit-flex: 0 0 100px;
-    flex: 0 0 100px;
-    margin-left: 15px;
-    text-align: center;
-    cursor: pointer;
+.mx_LinkPreviewWidget:before {
+    position: absolute;
+    z-index: 1;
+    content: '\0020';
+    top: 0;
+    left: -15px;
+    width: 1px;
+    height: 100%;
+    background-color: #dddddd;
+}
+
+.mx_LinkPreviewWidget_indicator {
+    position: absolute;
+    z-index: 1;
+    top: 2px;
+    left: -40px;
 }
 
 .mx_LinkPreviewWidget_caption {
-    margin-left: 15px;
-    -webkit-flex: 1 1 auto;
-    flex: 1 1 auto;
+    margin-bottom: 10px;
 }
 
 .mx_LinkPreviewWidget_title {
-    display: inline;
     font-weight: bold;
 }
 
 .mx_LinkPreviewWidget_siteName {
-    display: inline;
+    opacity: 0.5;
+    font-size: 13px;
+    line-height: 18px;
 }
 
-.mx_LinkPreviewWidget_description {
-    margin-top: 8px;
-    white-space: normal;
-    word-break: break-word;
+.mx_LinkPreviewWidget_image {
+    margin-top: 10px;
+    margin-bottom: 10px;
 }
 
-.mx_LinkPreviewWidget_cancel {
-    visibility: hidden;
+.mx_LinkPreviewWidget_image img {
     cursor: pointer;
-    -webkit-flex: 0 0 40px;
-    flex: 0 0 40px;
-}
-
-.mx_LinkPreviewWidget:hover .mx_LinkPreviewWidget_cancel {
-    visibility: visible;
 }