added metadata editor sidebar

dashboard-ui/css/librarybrowser.css

@@ -507,16 +507,6 @@ a.itemTag:hover {
     .noBackdrop .lnkSibling {
         bottom: 205px;
     }
-
-    .metadataFormFields {
-        float: left;
-        width: 75%;
-    }
-
-    .metadataFormButtons {
-        float: right;
-        width: 23%;
-    }
 }
 
 @media all and (min-width: 650px) {

dashboard-ui/css/metadataeditor.css

@@ -0,0 +1,34 @@
+.editPageContent {
+    padding: 0;
+}
+
+.editPageInnerContent {
+    padding: 0 15px 15px;
+}
+
+.editPageName {
+    margin: .5em 0 0;
+}
+
+.editPageSidebar {
+    display: none;
+}
+
+@media all and (min-width: 600px) {
+
+    .editPageSidebar {
+        position: fixed;
+        top: 36px;
+        bottom: 0;
+        left: 0;
+        width: 27.5%;
+        overflow-y: scroll;
+        overflow-x: auto!important;
+        display: block;
+    }
+
+    .editPageInnerContent {
+        float: right;
+        width: 70%;
+    }
+}

dashboard-ui/css/tileitem.css

@@ -117,8 +117,29 @@
     width: 18px;
 }
 
-@media all and (min-width: 600px) {
+@media all and (min-width: 540px) {
 
+    .tileItem {
+        display: inline-block;
+        margin-left: 3px;
+        margin-right: 3px;
+    }
+
+    .backdropTileItem {
+        display: block;
+    }
+
+    .posterTileItem, .squareTileItem {
+        width: 45%;
+    }
+
+    .posterTileItem .tileImage {
+        height: 120px;
+    }
+
+    .squareTileItem .tileImage {
+        height: 115px;
+    }
 
     .smallPosterTileItem {
         width: 210px;
@@ -128,16 +149,14 @@
 }
 
 @media all and (min-width: 750px) {
-    .tileItem {
-        display: inline-block;
-        margin-left: 3px;
-        margin-right: 3px;
-    }
-
     .smallBackdropTileItem {
         display: block;
     }
 
+    .backdropTileItem {
+        display: inline-block;
+    }
+
 
     .backdropTileItem, .posterTileItem, .squareTileItem {
         width: 46%;