diff --git a/chrome/content/zotero/components/tabBar.jsx b/chrome/content/zotero/components/tabBar.jsx
index 78d0f450d6..44aba9f848 100644
--- a/chrome/content/zotero/components/tabBar.jsx
+++ b/chrome/content/zotero/components/tabBar.jsx
@@ -289,7 +289,7 @@ const TabBar = forwardRef(function (props, ref) {
 				tabIndex="-1"
 			>
 				{icon}
-				<div className="tab-name" dir="auto">{title}</div>
+				<div className="tab-name">{title}</div>
 				<div
 					className="tab-close"
 					onClick={(event) => handleTabClose(event, id)}
diff --git a/scss/components/_tabBar.scss b/scss/components/_tabBar.scss
index 96df50749b..903ef52465 100644
--- a/scss/components/_tabBar.scss
+++ b/scss/components/_tabBar.scss
@@ -161,8 +161,8 @@
 	min-width: 100px;
 	height: 28px;
 	line-height: 16px;
-	padding-right: 22px;
-	padding-left: 6px;
+	padding-inline-end: 22px;
+	padding-inline-start: 6px;
 	display: flex;
 	align-items: center;
 	border-radius: 5px;
@@ -201,9 +201,16 @@
 		line-height: 1.38461538em;
 		margin-inline-start: 4px;
 		overflow: hidden;
-		text-align: left;
+		text-align: start;
 		white-space: nowrap;
-		mask-image: linear-gradient(to left, transparent 0px, var(--fill-primary) 20px);
+
+		&:dir(ltr) {
+			mask-image: linear-gradient(to left, transparent 0px, var(--fill-primary) 20px);
+		}
+
+		&:dir(rtl) {
+			mask-image: linear-gradient(to right, transparent 0px, var(--fill-primary) 20px);
+		}
 	}
 
 	.tab-icon {