update file layout and more fixes :)

ui/js/component/video/view.jsx

@@ -80,7 +80,7 @@ class Video extends React.PureComponent {
       loadStatusMessage = __("Downloading stream... not long left now!");
     }
 
-    let klasses = ["card"];
+    let klasses = [];
     klasses.push(obscureNsfw ? "video--obscured " : "");
     if (isLoading || isDownloading) klasses.push("video-embedded", "video");
     if (mediaType === "video") {

ui/js/page/file/view.jsx

@@ -63,15 +63,14 @@ class FilePage extends React.PureComponent {
       mediaType === "audio";
 
     return (
-      <div>
-        <section className="show-page-media">
+      <section className={"card " + (obscureNsfw ? "card--obscured " : "")}>
+        <div className="show-page-media">
           {isPlayable
             ? <Video className="video-embedded" uri={uri} />
             : metadata && metadata.thumbnail
               ? <Thumbnail src={metadata.thumbnail} />
               : <Thumbnail />}
-        </section>
-        <section className={"card " + (obscureNsfw ? "card--obscured " : "")}>
+        </div>
         <div className="card__inner">
           {(!tab || tab === "details") &&
             <div>
@@ -100,7 +99,6 @@ class FilePage extends React.PureComponent {
             <WalletSendTip claim_id={claim.claim_id} uri={uri} />}
         </div>
       </section>
-      </div>
     );
   }
 }

ui/scss/component/_card.scss

@@ -44,7 +44,7 @@
   text-overflow: ellipsis;
 }
 .card__title-identity {
-  margin: $spacing-vertical * 1/2 0;
+  margin: 16px 0;
 }
 .card__actions {
   margin-top: var(--card-margin);

ui/scss/page/_show.scss

@@ -1,6 +1,7 @@
 .show-page-media {
   text-align: center;
-  margin-bottom: $spacing-vertical;
+  margin-bottom: 16px;
+  overflow: auto;
   img {
     max-width: 100%;
   }