Expando: Do not float

Expandos got a css rule added to them to support the NSFW interstitial
flow, but this caused some unintended bugs with subreddit CSS.  The
positioning of the interstitial's button on the media preview overlay
is dependent on the floating, so this moves the application of the
float rule to a child element on media previews only so the expando
element itself can remain unfloated.

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

@@ -5027,9 +5027,12 @@ ul.tabmenu.formtab {
 /******* embed stuff ******/
 .expando {
     clear: left;
-    float: left;
     margin: 5px 0 5px 0;
     position: relative;
+
+    .form-bar {
+        float: left;
+    }
 }
 
 .link.over18 .expando-uninitialized {
@@ -5039,10 +5042,6 @@ ul.tabmenu.formtab {
     }
 }
 
-.link.self .expando {
-    float: none;
-}
-
 .expando-content {
     display: none;
 }
@@ -5125,11 +5124,12 @@ ul.tabmenu.formtab {
 }
 
 .form-bar {
-    position: relative;
     background: lighten(@color-pale-grey, 10%);
     border: 1px solid @color-pale-grey;
-    padding: unit(@margin-x-small, px) unit(@margin-small, px);
+    clear: left;
     margin-top: unit(@margin-small, px);
+    padding: unit(@margin-x-small, px) unit(@margin-small, px);
+    position: relative;
 
     .md {
         float: left;
@@ -5142,6 +5142,13 @@ ul.tabmenu.formtab {
 }
 
 .media-preview {
+    overflow: auto;
+    position: relative;
+
+    .media-preview-content {
+        float: left;
+    }
+
     img {
         width: 100%;
         height: auto;

r2/r2/public/static/js/expando/nsfwflow.js

@@ -244,11 +244,11 @@
         }
 
         var $expando = expando.$expando;
-        var $media = $expando.find('.media-embed'); 
+        var $media = $expando.children();
         var width = $media.width();
         var height = $media.height();
         // if it's a `.media-preview`, interstial is shown _over_ the blurred image
-        var isOverlay = !$media.length;
+        var isOverlay = $media.hasClass('media-preview');
         var isWarning = !_state.noProfanity;
 
         nsfwFlow = new ExpandoNSFWFlow({
@@ -262,9 +262,9 @@
         expando.listenTo(nsfwFlow, 'show', destroyNsfwFlow);
 
         if (nsfwFlow.isOverlay) {
-          expando.$expando.append(nsfwFlow.el);
+          $media.append(nsfwFlow.el);
         } else {
-          expando.$expando.html(nsfwFlow.el);
+          $expando.html(nsfwFlow.el);
         }
 
         expando.showExpandoContent();

r2/r2/templates/mediapreview.html

@@ -27,5 +27,7 @@
 <div class="media-preview"
      id="media-preview-${thing.id36}"
      style="max-width: ${thing.width}px">
-  ${unsafe(thing.media_content)}
+  <div class="media-preview-content">
+    ${unsafe(thing.media_content)}
+  </div>
 </div>