updated detail page styles

dashboard-ui/css/librarybrowser.css

@@ -211,7 +211,7 @@
 
 .posterDetailViewImage {
     max-height: 90px;
-    max-width: 47%;
+    max-width: 46.5%;
 }
 
 .posterDetailViewItem p {
@@ -289,7 +289,7 @@
 
 @media all and (min-width: 1200px) {
     .posterDetailViewItem {
-        width: 31%;
+        width: 30.6%;
     }
 
     .scenePosterViewItem img {
@@ -306,7 +306,7 @@
 
 @media all and (min-width: 1920px) {
     .posterDetailViewItem {
-        width: 31.5%;
+        width: 31.3%;
     }
 
     .posterDetailViewImage {
@@ -316,7 +316,7 @@
 
 @media all and (min-width: 2000px) {
     .posterDetailViewItem {
-        width: 23.5%;
+        width: 23%;
     }
 }
 

dashboard-ui/css/site.css

@@ -756,25 +756,29 @@ progress {
 @media all and (min-width: 1440px) {
 
     .itemDetailImage {
-        width: 400px;
+        width: 350px;
     }
 
     .itemDetailBlock {
-        width: 68%;
+        width: 60%;
     }
 }
 
 @media all and (min-width: 1700px) {
 
+    .itemDetailImage {
+        width: 400px;
+    }
+
     .itemDetailBlock {
-        width: 73%;
+        width: 61%;
     }
 }
 
 @media all and (min-width: 1920px) {
 
     .itemDetailBlock {
-        width: 77%;
+        width: 65%;
     }
 }
 

dashboard-ui/itemdetails.html

@@ -136,7 +136,7 @@
                     </div>
                 </div>
                 <div style="display: inline-block; vertical-align: top;">
-                    <div data-role="collapsible" id="galleryCollapsible" style="display: none;" data-collapsed="false" data-corners="false">
+                    <div data-role="collapsible" id="galleryCollapsible" style="display: none;" data-mini="true" data-collapsed="false" data-corners="false">
                         <h3>Gallery</h3>
                         <div id="galleryContent"></div>
                     </div>