diff --git a/src/assets/css/librarybrowser.scss b/src/assets/css/librarybrowser.scss
index d896ae8811..1b0249b650 100644
--- a/src/assets/css/librarybrowser.scss
+++ b/src/assets/css/librarybrowser.scss
@@ -732,9 +732,9 @@
 .layout-mobile .itemName,
 .layout-mobile .itemMiscInfo,
 .layout-mobile .mainDetailButtons {
-    align-items: center !important;
-    justify-content: center !important;
-    text-align: center !important;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
 }
 
 .layout-mobile .mainDetailButtons {
@@ -798,16 +798,14 @@
         display: block;
     }
 
-    [dir="ltr"] & {
-        .layout-desktop &,
-        .layout-tv & {
+    .layout-desktop &,
+    .layout-tv & {
+        [dir="ltr"] & {
             padding-left: 32.45vw;
-        }
-    }
 
-    [dir="rtl"] & {
-        .layout-desktop &,
-        .layout-tv & {
+        }
+
+        [dir="rtl"] & {
             padding-right: 32.45vw;
         }
     }
@@ -829,18 +827,18 @@
     flex: 1 0 0;
 
     .layout-mobile & {
-        @include header-poster-padding;
+        [dir="ltr"] {
+            @include header-poster-padding;
+        }
+
+        [dir="rtl"] & {
+            @include header-poster-padding-rtl;
+        }
 
         @media all and (max-width: 32em) {
             position: relative;
         }
     }
-
-    [dir="rtl"] & {
-        .layout-mobile & {
-            @include header-poster-padding-rtl;
-        }
-    }
 }
 
 .infoText {
diff --git a/src/components/listview/listview.scss b/src/components/listview/listview.scss
index 3d138cb752..75324e6449 100644
--- a/src/components/listview/listview.scss
+++ b/src/components/listview/listview.scss
@@ -83,8 +83,15 @@
 }
 
 .listViewDragHandle {
-    margin-inline-start: -0.25em !important;
     touch-action: none;
+
+    [dir="ltr"] & {
+        margin-left: -0.25em !important;
+    }
+
+    [dir="rtl"] & {
+        margin-right: -0.25em !important;
+    }
 }
 
 .listItemBody {
diff --git a/src/components/mediaLibraryCreator/mediaLibraryCreator.js b/src/components/mediaLibraryCreator/mediaLibraryCreator.js
index 37c4d376fa..05c0fb02f8 100644
--- a/src/components/mediaLibraryCreator/mediaLibraryCreator.js
+++ b/src/components/mediaLibraryCreator/mediaLibraryCreator.js
@@ -120,7 +120,7 @@ import template from './mediaLibraryCreator.template.html';
 
     function getFolderHtml(pathInfo, index) {
         let html = '';
-        html += '<div class="listItem listItem-border lnkPath" style="padding-left:.5em;">';
+        html += '<div class="listItem listItem-border lnkPath">';
         html += `<div class="${pathInfo.NetworkPath ? 'listItemBody two-line' : 'listItemBody'}">`;
         html += `<div class="listItemBodyText" dir="ltr">${escapeHtml(pathInfo.Path)}</div>`;
 
diff --git a/src/components/mediaLibraryEditor/mediaLibraryEditor.js b/src/components/mediaLibraryEditor/mediaLibraryEditor.js
index 5f99f5dede..da0dc2909c 100644
--- a/src/components/mediaLibraryEditor/mediaLibraryEditor.js
+++ b/src/components/mediaLibraryEditor/mediaLibraryEditor.js
@@ -110,7 +110,7 @@ import template from './mediaLibraryEditor.template.html';
 
     function getFolderHtml(pathInfo, index) {
         let html = '';
-        html += `<div class="listItem listItem-border lnkPath" data-index="${index}" style="padding-inline-start:.5em;">`;
+        html += `<div class="listItem listItem-border lnkPath" data-index="${index}">`;
         html += `<div class="${pathInfo.NetworkPath ? 'listItemBody two-line' : 'listItemBody'}">`;
         html += '<h3 class="listItemBodyText">';
         html += escapeHtml(pathInfo.Path);
diff --git a/src/components/mediainfo/mediainfo.scss b/src/components/mediainfo/mediainfo.scss
index 1db5136389..cb623b685d 100644
--- a/src/components/mediainfo/mediainfo.scss
+++ b/src/components/mediainfo/mediainfo.scss
@@ -59,7 +59,6 @@
 }
 
 .mediaInfoCriticRating {
-    background-position: left center;
     background-repeat: no-repeat;
     background-size: auto 1.2em;
     min-height: 1.2em;
@@ -68,6 +67,7 @@
 
     [dir="ltr"] & {
         padding-left: 1.5em;
+        background-position: left center;
     }
 
     [dir="rtl"] & {
diff --git a/src/components/metadataEditor/metadataEditor.js b/src/components/metadataEditor/metadataEditor.js
index 10112a8453..a36779ba53 100644
--- a/src/components/metadataEditor/metadataEditor.js
+++ b/src/components/metadataEditor/metadataEditor.js
@@ -17,6 +17,7 @@ import '../../elements/emby-button/paper-icon-button-light';
 import '../formdialog.scss';
 import '../../assets/css/clearbutton.scss';
 import '../../assets/css/flexstyles.scss';
+import './style.scss';
 import ServerConnections from '../ServerConnections';
 import toast from '../toast/toast';
 import { appRouter } from '../appRouter';
diff --git a/src/components/metadataEditor/metadataEditor.template.html b/src/components/metadataEditor/metadataEditor.template.html
index faecc5643d..b0d73793d2 100644
--- a/src/components/metadataEditor/metadataEditor.template.html
+++ b/src/components/metadataEditor/metadataEditor.template.html
@@ -3,7 +3,7 @@
     <h3 class="formDialogHeaderTitle">
         ${Edit}
     </h3>
-    <div style="margin-inline-start: auto;" class="flex align-items-center justify-content-center">
+    <div class="dialogHeader flex align-items-center justify-content-center">
         <button is="emby-button" type="button" class="btnHeaderSave button-accent-flat button-flat hide" tabindex="-1">
             <span class="material-icons check" aria-hidden="true"></span>
             <span>${Save}</span>
@@ -194,7 +194,7 @@
                 <h2 style="margin:.6em 0;vertical-align:middle;display:inline-block;">
                     ${Genres}
                 </h2>
-                <button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-inline-start:1em;" title="${Add}">
+                <button is="emby-button" type="button" class="fab btnAddTextItem submit marginLeft" title="${Add}">
                     <span class="material-icons add" aria-hidden="true"></span>
                 </button>
                 <div class="paperList" id="listGenres"></div>
@@ -203,7 +203,7 @@
                 <h2 style="margin:.6em 0;vertical-align:middle;display:inline-block;">
                     ${People}
                 </h2>
-                <button is="emby-button" type="button" id="btnAddPerson" class="fab btnAddPerson" style="margin-inline-start:1em;" title="${Add}">
+                <button is="emby-button" type="button" id="btnAddPerson" class="fab btnAddPerson marginLeft" title="${Add}">
                     <span class="material-icons add" aria-hidden="true"></span>
                 </button>
                 <div id="peopleList" class="paperList">
@@ -213,7 +213,7 @@
                 <h2 style="margin:.6em 0;vertical-align:middle;display:inline-block;">
                     ${Studios}
                 </h2>
-                <button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-inline-start:1em;" title="${Add}">
+                <button is="emby-button" type="button" class="fab btnAddTextItem submit marginLeft" title="${Add}">
                     <span class="material-icons add" aria-hidden="true"></span>
                 </button>
                 <div class="paperList" id="listStudios"></div>
@@ -222,7 +222,7 @@
                 <h2 style="margin:.6em 0;vertical-align:middle;display:inline-block;">
                     ${Tags}
                 </h2>
-                <button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-inline-start:1em;" title="${Add}">
+                <button is="emby-button" type="button" class="fab btnAddTextItem submit marginLeft" title="${Add}">
                     <span class="material-icons add" aria-hidden="true"></span>
                 </button>
                 <div class="paperList" id="listTags"></div>
diff --git a/src/components/metadataEditor/style.scss b/src/components/metadataEditor/style.scss
new file mode 100644
index 0000000000..37bfdbe66b
--- /dev/null
+++ b/src/components/metadataEditor/style.scss
@@ -0,0 +1,19 @@
+.dialogHeader {
+    [dir="ltr"] & {
+        margin-left: auto;
+    }
+
+    [dir="rtl"] & {
+        margin-right: auto;
+    }
+}
+
+.marginLeft {
+    [dir="ltr"] & {
+        margin-left:1em;
+    }
+
+    [dir="rtl"] & {
+        margin-right:1em;
+    }
+}
diff --git a/src/controllers/dashboard/library.js b/src/controllers/dashboard/library.js
index f083e2aefe..550cf9dc0e 100644
--- a/src/controllers/dashboard/library.js
+++ b/src/controllers/dashboard/library.js
@@ -310,7 +310,10 @@ import cardBuilder from '../../components/cardbuilder/cardBuilder';
         html += '<div class="cardFooter visualCardBox-cardFooter">'; // always show menu unless explicitly hidden
 
         if (virtualFolder.showMenu !== false) {
-            html += '<div style="text-align:end; float:inline-end;padding-top:5px;">';
+            let dirTextAlign = 'right';
+            if (globalize.getIsRTL())
+                dirTextAlign = 'left';
+            html += '<div style="text-align:' + dirTextAlign + '; float:' + dirTextAlign + ';padding-top:5px;">';
             html += '<button type="button" is="paper-icon-button-light" class="btnCardMenu autoSize"><span class="material-icons more_vert" aria-hidden="true"></span></button>';
             html += '</div>';
         }