Some library rtl fixes

src/assets/css/librarybrowser.scss

@@ -32,6 +32,39 @@
     }
 }
 
+@mixin header-poster-padding-rtl() {
+    padding-left: unset;
+    padding-right: 37.5%;
+
+    @media all and (min-width: 43.75em) {
+        padding-right: 25%;
+    }
+
+    @media all and (min-width: 50em) {
+        padding-right: 20%;
+    }
+
+    @media all and (min-width: 75em) {
+        padding-right: 16.666666666666666666666666666667%;
+    }
+
+    @media all and (min-width: 87.5em) {
+        padding-right: 14.285714285714285714285714285714%;
+    }
+
+    @media all and (min-width: 100em) {
+        padding-right: 12.5%;
+    }
+
+    @media all and (min-width: 120em) {
+        padding-right: 11.111111111111111111111111111111%;
+    }
+
+    @media all and (min-width: 131.25em) {
+        padding-right: 10%;
+    }
+}
+
 .headerUserImage,
 .navMenuOption,
 .pageTitle {
@@ -622,9 +655,9 @@
 .layout-mobile .itemName,
 .layout-mobile .itemMiscInfo,
 .layout-mobile .mainDetailButtons {
-    align-items: center;
+    align-items: center !important;
-    justify-content: center;
+    justify-content: center !important;
-    text-align: center;
+    text-align: center !important;
 }
 
 .layout-mobile .mainDetailButtons {
@@ -641,6 +674,8 @@
     }
 
     [dir="rtl"] & {
+        @include header-poster-padding-rtl;
+
         @media all and (max-width: 32em) {
             padding-left: unset;
             padding-right: 0;
@@ -714,6 +749,12 @@
             position: relative;
         }
     }
+
+    [dir="rtl"] & {
+        .layout-mobile & {
+            @include header-poster-padding-rtl;
+        }
+    }
 }
 
 .infoText {

src/components/alphaPicker/style.scss

@@ -107,7 +107,7 @@
 }
 
 .alphaPicker-fixed-right {
-    right: 0.4em;
+    inset-inline-end: 0.4em;
 }
 
 @media all and (min-width: 62.5em) {
@@ -116,6 +116,15 @@
     }
 }
 
+[dir="rtl"] {
+    @media all and (min-width: 62.5em) {
+        .alphaPicker-fixed-right {
+            right: unset;
+            left: 1em;
+        }
+    }
+}
+
 @media all and (max-height: 31.25em) {
     .alphaPicker-fixed {
         display: none !important;

src/components/listview/listview.js

@@ -149,7 +149,7 @@ import ServerConnections from '../ServerConnections';
 
             elem.classList.add('listItemBodyText');
 
-            elem.innerText = text;
+            elem.innerHTML = '<bdi>' + text + '</bdi>';
 
             html += elem.outerHTML;
         }
@@ -422,7 +422,7 @@ import ServerConnections from '../ServerConnections';
 
             if (enableOverview && item.Overview) {
                 html += '<div class="secondary listItem-overview listItemBodyText">';
-                html += item.Overview;
+                html += '<bdi>' + item.Overview + '</bdi>';
                 html += '</div>';
             }
 

src/controllers/itemDetails/index.js

@@ -473,7 +473,7 @@ function renderName(item, container, context) {
                 html = '<h3 class="parentName musicParentName focuscontainer-x">' + parentNameHtml.join(' - ') + '</h3>';
             }
         } else {
-            html = '<h1 class="parentName focuscontainer-x">' + tvShowHtml + '</h1>';
+            html = '<h1 class="parentName focuscontainer-x"><bdi>' + tvShowHtml + '</bdi></h1>';
         }
     }
 
@@ -483,21 +483,21 @@ function renderName(item, container, context) {
 
     if (html && !parentNameLast) {
         if (tvSeasonHtml) {
-            html += '<h3 class="itemName infoText subtitle focuscontainer-x">' + tvSeasonHtml + ' - ' + name + '</h3>';
+            html += '<h3 class="itemName infoText subtitle focuscontainer-x"><bdi>' + tvSeasonHtml + ' - </bdi><bdi>' + name + '</bdi></h3>';
         } else {
             html += '<h3 class="itemName infoText subtitle">' + name + '</h3>';
         }
     } else if (item.OriginalTitle && item.OriginalTitle != item.Name) {
         html = '<h1 class="itemName infoText parentNameLast withOriginalTitle">' + name + '</h1>' + html;
     } else {
-        html = '<h1 class="itemName infoText parentNameLast">' + name + '</h1>' + html;
+        html = '<h1 class="itemName infoText parentNameLast"><bdi>' + name + '</bdi></h1>' + html;
     }
 
     if (item.OriginalTitle && item.OriginalTitle != item.Name) {
         html += '<h4 class="itemName infoText originalTitle">' + escapeHtml(item.OriginalTitle) + '</h4>';
     }
 
-    container.innerHTML = '<bdi>' + html + '</bdi>';
+    container.innerHTML = html;
 
     if (html.length) {
         container.classList.remove('hide');