Fix layout issues on mobile item details

src/assets/css/librarybrowser.css

@@ -250,6 +250,22 @@
     padding-bottom: 10vh;
 }
 
+.primaryImageWrapper {
+    display: none;
+}
+
+.primaryImageWrapper > img {
+    display: block;
+    margin: 0 auto;
+    max-width: 80vw;
+    max-height: 50vh;
+}
+
+.layout-mobile .primaryImageWrapper {
+    display: block;
+    flex: 1 0 auto;
+}
+
 @media all and (min-width: 40em) {
     .dashboardDocument .adminDrawerLogo,
     .dashboardDocument .mainDrawerButton {
@@ -453,8 +469,7 @@
 }
 
 .layout-mobile .itemBackdrop {
-    background-attachment: scroll;
-    height: 26.5vh;
+    display: none;
 }
 
 .layout-desktop .itemBackdrop::after {
@@ -614,6 +629,7 @@
 }
 
 .layout-mobile .mainDetailButtons {
+    flex: 2 0 70%;
     margin-top: 1em;
     margin-bottom: 0.5em;
 }
@@ -638,9 +654,9 @@
 }
 
 .layout-mobile .detailPagePrimaryContainer {
-    display: block;
+    flex-wrap: wrap;
     position: relative;
-    padding: 0.5em 3.3% 0.5em;
+    padding: 4.5rem 3.3% 0.5rem;
 }
 
 .layout-tv #itemDetailPage:not(.noBackdrop) .detailPagePrimaryContainer,
@@ -669,6 +685,10 @@
     flex: 1 0 0;
 }
 
+.layout-mobile .infoWrapper {
+    flex: 2 0 70%;
+}
+
 .infoText {
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -729,7 +749,8 @@
     background-size: contain;
 }
 
-.noBackdrop .detailLogo {
+.noBackdrop .detailLogo,
+.layout-mobile .detailLogo {
     display: none;
 }