media details improve formatting

html/media/details.html

@@ -16,95 +16,77 @@ <h1 id="media_heading" data-t>Media Details</h1>
   <div class="hidden" id="media_details_table">
 
   <div class="fieldrow">
-    <label data-t>ID</label>
-    <span id="media_details_id"></span>
+    <label data-t>ID</label><span id="media_details_id"></span>
   </div>
 
   <div class="fieldrow">
-    <label data-t>Thumbnail</label>
-    <ob-field-thumbnail readonly id="media_details_thumbnail"></ob-field-thumbnail>
+    <label data-t>Thumbnail</label><ob-field-thumbnail readonly id="media_details_thumbnail"></ob-field-thumbnail>
   </div>
 
   <div class="fieldrow">
-    <label data-t>Artist</label>
-    <span id="media_details_artist"></span>
+    <label data-t>Artist</label><span id="media_details_artist"></span>
   </div>
 
   <div class="fieldrow">
-    <label data-t>Title</label>
-    <span id="media_details_title"></span>
+    <label data-t>Title</label><span id="media_details_title"></span>
   </div>
 
   <div class="fieldrow">
-    <label data-t>Album</label>
-    <span id="media_details_album"></span>
+    <label data-t>Album</label><span id="media_details_album"></span>
   </div>
 
   <div class="fieldrow">
-    <label data-t>Year</label>
-    <span id="media_details_year"></span>
+    <label data-t>Year</label><span id="media_details_year"></span>
   </div>
 
   <div class="fieldrow">
-    <label data-t>Category</label>
-    <span id="media_details_category"></span>
+    <label data-t>Category</label><span id="media_details_category"></span>
   </div>
 
   <div class="fieldrow">
-    <label data-t>Country</label>
-    <span id="media_details_country"></span>
+    <label data-t>Country</label><span id="media_details_country"></span>
   </div>
 
   <div class="fieldrow">
-    <label data-t>Language</label>
-    <span id="media_details_language"></span>
+    <label data-t>Language</label><span id="media_details_language"></span>
   </div>
 
   <div class="fieldrow">
-    <label data-t>Genre</label>
-    <span id="media_details_genre"></span>
+    <label data-t>Genre</label><span id="media_details_genre"></span>
   </div>
 
   <div class="fieldrow">
-    <label data-t>Comments</label>
-    <span id="media_details_comments"></span>
+    <label data-t>Comments</label><span id="media_details_comments"></span>
   </div>
 
   <div id="media_details_metadata"></div>
 
   <div class="fieldrow">
-    <label data-t>Uploader</label>
-    <span id="media_details_uploader"></span>
+    <label data-t>Uploader</label><span id="media_details_uploader"></span>
   </div>
 
   <div class="fieldrow">
-    <label data-t>Created</label>
-    <span id="media_details_created"></span>
+    <label data-t>Created</label><span id="media_details_created"></span>
   </div>
 
   <div class="fieldrow">
-    <label data-t>Last Updated</label>
-    <span id="media_details_updated"></span>
+    <label data-t>Last Updated</label><span id="media_details_updated"></span>
   </div>
 
   <div class="fieldrow">
-    <label data-t>Copyright</label>
-    <span id="media_details_copyright"></span>
+    <label data-t>Copyright</label><span id="media_details_copyright"></span>
   </div>
 
   <div class="fieldrow">
-    <label data-t>Approval</label>
-    <span id="media_details_approval"></span>
+    <label data-t>Approval</label><span id="media_details_approval"></span>
   </div>
 
   <div class="fieldrow">
-    <label data-t>Status</label>
-    <span id="media_details_visibility"></span>
+    <label data-t>Status</label><span id="media_details_visibility"></span>
   </div>
 
   <div class="fieldrow">
-    <label data-t>Dynamic Selections</label>
-    <span id="media_details_dynamic"></span>
+    <label data-t>Dynamic Selections</label><span id="media_details_dynamic"></span>
   </div>
 
   </div>

scss/_core.scss

@@ -191,6 +191,15 @@ select, textarea
   box-shadow: 0 0 0 40px white inset; // firefox autofill fix
 }
 
+#media_details_table .fieldrow > label {
+  padding-right: 10px;
+}
+
+#media_details_table .fieldrow > label + * {
+  position: relative;
+  top: 3px;
+}
+
 textarea, ob-tag-input, ob-user-input, ob-group-input, ob-media-input, ob-playlist-input
 {
   vertical-align: top;