make file details smaller

static/app-strings.json

@@ -1480,5 +1480,6 @@
   "Español": "Español",
   "Türkçe": "Türkçe",
   "Česky": "Česky",
+  "LBRY LATAM": "LBRY LATAM",
   "--end--": "--end--"
 }

ui/component/fileDetails/view.jsx

@@ -1,4 +1,5 @@
 // @flow
+import { SIMPLE_SITE } from 'config';
 import React, { PureComponent } from 'react';
 import Button from 'component/button';
 import path from 'path';
@@ -38,43 +39,41 @@ class FileDetails extends PureComponent<Props> {
     }
 
     return (
-      <table className="table table--condensed table--fixed table--file-details">
-        <tbody>
-          <tr>
-            <td> {__('Content Type')}</td>
-            <td>{mediaType}</td>
-          </tr>
-          {fileSize && (
-            <tr>
-              <td> {__('File Size')}</td>
-              <td>{fileSize}</td>
-            </tr>
+      <>
+        <div className="media__details">
+          <span>{__('LBRY URL')}</span>
+          <span>{claim.canonical_url}</span>
+        </div>
+        <div className="media__details">
+          <span>{__('Claim ID')}</span>
+          <span>{claim.claim_id}</span>
+        </div>
+
+        {!SIMPLE_SITE && (
+          <>
+            {languages && (
+              <div className="media__details">
+                <span>{__('Languages')}</span>
+                <span>{languages.join(' ')}</span>
+              </div>
             )}
 
-          <tr>
-            <td> {__('URL')}</td>
-            <td>{claim.canonical_url}</td>
-          </tr>
-
-          <tr>
-            <td> {__('Claim ID')}</td>
-            <td>{claim.claim_id}</td>
-          </tr>
-
             {languages && (
-            <tr>
-              <td>{__('Languages')}</td>
-              <td>{languages.join(' ')}</td>
-            </tr>
+              <div className="media__details">
+                <span>{__('Media Type')}</span>
+                <span>{mediaType}</span>
+              </div>
             )}
-          <tr>
-            <td>{__('License')}</td>
-            <td>{license}</td>
-          </tr>
+
+            <div className="media__details">
+              <span>{__('License')}</span>
+              <span>{license}</span>
+            </div>
+
             {downloadPath && (
-            <tr>
-              <td>{__('Downloaded to')}</td>
-              <td>
+              <div className="media__details">
+                <span>{__('Downloaded to')}</span>
+                <span>
                   <Button
                     button="link"
                     className="button--download-link"
@@ -85,11 +84,18 @@ class FileDetails extends PureComponent<Props> {
                     }}
                     label={downloadNote || downloadPath.replace(/(.{10})/g, '$1\u200b')}
                   />
-              </td>
-            </tr>
+                </span>
+              </div>
             )}
-        </tbody>
-      </table>
+          </>
+        )}
+
+        {fileSize && (
+          <div className="media__details">
+            <span>{fileSize}</span>
+          </div>
+        )}
+      </>
     );
   }
 }

ui/scss/component/_media.scss

@@ -153,3 +153,15 @@
     }
   }
 }
+
+.media__details {
+  @extend .help;
+  font-size: var(--font-xxsmall);
+  display: flex;
+  flex-direction: column;
+  //   margin-top: 0;
+
+  &:first-of-type {
+    // margin-top: var(--spacing-m);
+  }
+}