Comment embeds: improve frame styles

This moves the margin, border-radius, and box-shadow to the iframe
itself so things don't have to be awkwardly inset.

r2/r2/public/static/css/reddit-embed.less

@@ -2,7 +2,6 @@
 @import "components/mixins.less";
 @import "markdown.less";
 
-@embed-border-radius: 5px;
 
 * {
     .box-sizing(border-box)
@@ -11,7 +10,6 @@
 body {
     font: normal 14px verdana, arial, helvetica, sans-serif;
     margin: 0;
-    padding: 5px;
 }
 
 a {
@@ -29,9 +27,6 @@ p {
 
 .reddit-embed {
     background: #fff;
-    border-radius: @embed-border-radius;
-    .box-shadow(0 0 3px rgba(0,0,0,0.15));
-    max-width: 60em;
 }
 
 .reddit-embed-content {
@@ -44,8 +39,6 @@ p {
     @snoo-padding: 12px;
 
     background: #f7f7f7;
-    border-bottom-left-radius: @embed-border-radius;
-    border-bottom-right-radius: @embed-border-radius;
     display: table;
     font-size: 12px;
     height: (@snoo-height + (@snoo-padding * 2));

r2/r2/public/static/css/reddit.less

@@ -10448,14 +10448,7 @@ body.banned.deleted div#header {
 }
 
 #embed-preview {
-    margin: -5px;
-    margin-bottom: 0;
     overflow-y: hidden;
-
-    // re-add margin to non-iframed version
-    .reddit-embed {
-        margin: 5px;
-    }
 }
 
 .more-actions {

r2/r2/public/static/js/embed/comment-embed.js

@@ -69,6 +69,14 @@
       iframe.frameBorder = 0;
       iframe.allowTransparency = true;
       iframe.style.display = 'none';
+      iframe.style.maxWidth = '60em';
+      iframe.style.minWidth = '220px';
+      iframe.style.margin = '10px 0';
+      iframe.style.borderRadius = '5px';
+      iframe.style.boxShadow = '0 0 3px rgba(0, 0, 0, 0.14)';
+      iframe.style.borderColor = '#f4f4f4 #e4e4e4 #d4d4d4';
+      iframe.style.borderWidth = '1px';
+      iframe.style.borderStyle = 'solid';
       iframe.src = getEmbedUrl(commentUrl, embed);
 
       App.receiveMessageOnce(iframe, 'ping', function(e) {