Backport pull request #7378 from jellyfin-web/release-10.11.z

Fix card and logo position for rtl languages

Original-merge: 06f5442fc9

Merged-by: thornbill <thornbill@users.noreply.github.com>

Backported-by: thornbill <thornbill@users.noreply.github.com>

src/styles/librarybrowser.scss

@@ -501,6 +501,20 @@
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center center;
+
+    [dir="rtl"] & {
+        left: 25vw;
+        right: unset;
+    }
+
+    .layout-mobile &,
+    .layout-tv & {
+        display: none;
+    }
+
+    @media all and (max-width: 68.75em) {
+        display: none;
+    }
 }
 
 .criticReview:first-child {
@@ -901,6 +915,7 @@
 
     [dir="rtl"] & {
         left: unset;
+        float: right;
 
         .layout-mobile &,
         .layout-tv & {
@@ -939,19 +954,6 @@
     }
 }
 
-.layout-mobile,
-.layout-tv {
-    .detailLogo {
-        display: none;
-    }
-}
-
-@media all and (max-width: 68.75em) {
-    .detailLogo {
-        display: none;
-    }
-}
-
 .itemDetailImage {
     width: 100% !important;
     box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.75);