7 files changed, 20 insertions, 24 deletions

diff --git a/packages/renderer/src/components/NotificationBanner.tsx b/packages/renderer/src/components/NotificationBanner.tsx
index 36c192a..c759d46 100644
--- a/packages/renderer/src/components/NotificationBanner.tsx
+++ b/packages/renderer/src/components/NotificationBanner.tsx
@@ -41,21 +41,21 @@ const NotificationBannerRoot = styled(Alert)(({ theme }) => ({
     justifyContent: 'center',
   },
   '.MuiAlert-action': {
-    paddingInlineStart: 0,
+    paddingLeft: 0,
   },
 }));
 
 const NotificationBannerText = styled(Typography)(({ theme }) => ({
   fontSize: 'inherit',
   paddingTop: theme.spacing(1),
-  paddingInlineEnd: theme.spacing(2),
+  paddingRight: theme.spacing(2),
   flexGrow: 9999,
 }));
 
 const NotificationBannerButtons = styled(Box)(({ theme }) => ({
   fontSize: 'inherit',
   paddingTop: theme.spacing(0.5),
-  paddingInlineEnd: theme.spacing(0.5),
+  paddingRight: theme.spacing(0.5),
   display: 'flex',
   flexWrap: 'wrap',
   flexGrow: 1,
diff --git a/packages/renderer/src/components/locationBar/LocationInputAdornment.tsx b/packages/renderer/src/components/locationBar/LocationInputAdornment.tsx
index 640cbb4..82f662d 100644
--- a/packages/renderer/src/components/locationBar/LocationInputAdornment.tsx
+++ b/packages/renderer/src/components/locationBar/LocationInputAdornment.tsx
@@ -23,11 +23,10 @@ import { styled } from '@mui/material/styles';
 
 const LocationInputAdornment = styled(InputAdornment, {
   name: 'LocationInputAdornment',
-})(({ theme: { direction }, position }) => {
-  const left = direction === 'ltr' ? 'start' : 'end';
+})(({ position }) => {
   const marginStart = -10;
   const marginEnd = 2;
-  return position === left
+  return position === 'start'
     ? {
         marginLeft: marginStart,
         marginRight: marginEnd,
diff --git a/packages/renderer/src/components/locationBar/LocationOverlayInput.tsx b/packages/renderer/src/components/locationBar/LocationOverlayInput.tsx
index a09cc57..cbb5b06 100644
--- a/packages/renderer/src/components/locationBar/LocationOverlayInput.tsx
+++ b/packages/renderer/src/components/locationBar/LocationOverlayInput.tsx
@@ -34,6 +34,8 @@ const LocationOverlayInputRoot = styled('div', {
 })<{ overlayVisible: boolean }>(({ theme, overlayVisible }) => {
   const itemStyle = {
     padding: '6px 0 7px 0',
+    // Set text alignment explicitly so it can be flipped by `stylis-plugin-rtl`.
+    textAlign: 'left',
   };
   return {
     display: 'flex',
@@ -86,12 +88,15 @@ const LocationOverlayInput = forwardRef(
       <input
         ref={ref}
         className={`${className ?? ''} ${inputClassName}`}
+        dir="ltr"
         {...props}
       />
       {/* eslint-enable react/jsx-props-no-spreading */}
       {overlayVisible && (
         <div aria-hidden className={`${className ?? ''} ${overlayClassName}`}>
-          <div className={clipClassName}>{overlay}</div>
+          <div className={clipClassName} dir="ltr">
+            {overlay}
+          </div>
         </div>
       )}
     </LocationOverlayInputRoot>
diff --git a/packages/renderer/src/components/locationBar/SecurityLabel.tsx b/packages/renderer/src/components/locationBar/SecurityLabel.tsx
index d9dff86..0017f89 100644
--- a/packages/renderer/src/components/locationBar/SecurityLabel.tsx
+++ b/packages/renderer/src/components/locationBar/SecurityLabel.tsx
@@ -45,7 +45,7 @@ const SecurityLabelText = styled('span', {
   name: 'SecurityLabel',
   slot: 'Text',
 })(({ theme }) => ({
-  marginInlineStart: theme.spacing(1),
+  marginLeft: theme.spacing(1),
   // Keep the same baseline as the input box text.
   paddingBottom: 1,
   fontWeight: theme.typography.fontWeightMedium,
diff --git a/packages/renderer/src/components/sidebar/ServiceIcon.tsx b/packages/renderer/src/components/sidebar/ServiceIcon.tsx
index 1017be9..7a6d58a 100644
--- a/packages/renderer/src/components/sidebar/ServiceIcon.tsx
+++ b/packages/renderer/src/components/sidebar/ServiceIcon.tsx
@@ -20,7 +20,7 @@
 
 import IconWarning from '@mui/icons-material/Warning';
 import Badge from '@mui/material/Badge';
-import { styled, useTheme } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
 import React, { useEffect, useState } from 'react';
 
@@ -89,7 +89,6 @@ const ServiceIconErrorBadge = styled(ServiceIconBadgeBase, {
 }));
 
 function ServiceIcon({ service }: { service: Service }): JSX.Element {
-  const { direction } = useTheme();
   const {
     settings: { name },
     directMessageCount,
@@ -114,7 +113,7 @@ function ServiceIcon({ service }: { service: Service }): JSX.Element {
       badgeContent={hasError ? <IconWarning fontSize="small" /> : 0}
       anchorOrigin={{
         vertical: 'bottom',
-        horizontal: direction === 'ltr' ? 'right' : 'left',
+        horizontal: 'right',
       }}
     >
       <ServiceIconBadge
@@ -125,7 +124,7 @@ function ServiceIcon({ service }: { service: Service }): JSX.Element {
         color="error"
         anchorOrigin={{
           vertical: 'top',
-          horizontal: direction === 'ltr' ? 'right' : 'left',
+          horizontal: 'right',
         }}
       >
         <ServiceIconRoot hasError={hasError}>
diff --git a/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
index 60b8b98..0ebd359 100644
--- a/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
+++ b/packages/renderer/src/components/sidebar/ServiceSwitcher.tsx
@@ -34,20 +34,13 @@ import ServiceIcon from './ServiceIcon';
 const ServiceSwitcherRoot = styled(Tabs, {
   name: 'ServiceSwitcher',
   slot: 'Root',
-})(({ theme }) => ({
+})({
   // Move the indicator to the outer side of the window.
   '.MuiTabs-indicator': {
-    ...(theme.direction === 'ltr'
-      ? {
-          left: 0,
-          right: 'auto',
-        }
-      : {
-          left: 'auto',
-          right: 0,
-        }),
+    left: 0,
+    right: 'auto',
   },
-}));
+});
 
 const ServiceSwitcherTab = styled(Tab, {
   name: 'ServiceSwitcher',
diff --git a/packages/renderer/src/components/sidebar/Sidebar.tsx b/packages/renderer/src/components/sidebar/Sidebar.tsx
index 6c2f219..fc57302 100644
--- a/packages/renderer/src/components/sidebar/Sidebar.tsx
+++ b/packages/renderer/src/components/sidebar/Sidebar.tsx
@@ -48,7 +48,7 @@ export default function Sidebar(): JSX.Element {
           position: 'absolute',
           top: '-20px',
           bottom: '-20px',
-          [theme.direction === 'ltr' ? 'right' : 'left']: '-20px',
+          right: '-20px',
           zIndex: 100,
           width: '20px',
           boxShadow: theme.shadows[4],