Fix layout issues on mobile item details

src/controllers/itemDetails/index.html

@@ -5,6 +5,10 @@
     <div class="detailLogo"></div>
     <div class="detailPageWrapperContainer">
         <div class="detailPagePrimaryContainer padded-left padded-right">
+            <div class="primaryImageWrapper">
+                <img id="primaryImage" />
+            </div>
+
             <div class="infoWrapper infoText">
                 <div class="nameContainer"></div>
                 <div class="itemMiscInfo itemMiscInfo-primary" style="margin-bottom: 0.6em;"></div>

src/controllers/itemDetails/index.js

@@ -552,7 +552,7 @@ function renderDetailPageBackdrop(page, item, apiClient) {
     let hasbackdrop = false;
     const itemBackdropElement = page.querySelector('#itemBackdrop');
 
-    if (!layoutManager.mobile && !userSettings.detailsBanner()) {
+    if (layoutManager.mobile || !userSettings.detailsBanner()) {
         return false;
     }
 
@@ -589,6 +589,19 @@ function renderDetailPageBackdrop(page, item, apiClient) {
     return hasbackdrop;
 }
 
+function renderPrimaryImage(page, item, apiClient) {
+    if (item?.ImageTags?.Primary) {
+        const imageUrl = apiClient.getScaledImageUrl(item.Id, {
+            type: 'Primary',
+            maxWidth: dom.getScreenWidth(),
+            tag: item.ImageTags.Primary
+        });
+
+        page.querySelector('#primaryImage').src = imageUrl;
+        page.querySelector('.primaryImageWrapper')?.classList.remove('hide');
+    }
+}
+
 function reloadFromItem(instance, page, params, item, user) {
     const apiClient = ServerConnections.getApiClient(item.ServerId);
 
@@ -601,6 +614,9 @@ function reloadFromItem(instance, page, params, item, user) {
         renderLogo(page, item, apiClient);
         renderDetailPageBackdrop(page, item, apiClient);
     }
+    if (layoutManager.mobile) {
+        renderPrimaryImage(page, item, apiClient);
+    }
     renderBackdrop(item);
 
     // Render the main information for the item
@@ -2073,7 +2089,7 @@ export default function (view, params) {
         view.addEventListener('viewshow', function (e) {
             const page = this;
 
-            libraryMenu.setTransparentMenu(true);
+            libraryMenu.setTransparentMenu(!layoutManager.mobile);
 
             if (e.detail.isRestored) {
                 if (currentItem) {