From c9c49d9a93bbaa0a9e15b3e762dda399e64fa0d6 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 10 Apr 2023 20:23:40 +0800
Subject: [PATCH] Fixes for logical properties

---
 package.json                         | 6 +++++-
 src/components/status.jsx            | 3 +++
 src/components/translation-block.jsx | 2 +-
 src/index.css                        | 4 ++++
 4 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 3c8c270b..aa880ea2 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,11 @@
   "postcss": {
     "plugins": {
       "postcss-dark-theme-class": {},
-      "postcss-preset-env": {}
+      "postcss-preset-env": {
+        "features": {
+          "logical-properties-and-values": false
+        }
+      }
     }
   },
   "browserslist": [
diff --git a/src/components/status.jsx b/src/components/status.jsx
index 3bdd3a42..9adc28ce 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -881,6 +881,7 @@ function Status({
               <div
                 class="content"
                 lang={language}
+                dir="auto"
                 ref={spoilerContentRef}
                 data-read-more={readMoreText}
               >
@@ -907,6 +908,7 @@ function Status({
           <div
             class="content"
             lang={language}
+            dir="auto"
             ref={contentRef}
             data-read-more={readMoreText}
             onClick={handleContentLinks({ mentions, instance, previewMode })}
@@ -1389,6 +1391,7 @@ function Poll({
   return (
     <div
       lang={lang}
+      dir="auto"
       class={`poll ${readOnly ? 'read-only' : ''} ${
         uiState === 'loading' ? 'loading' : ''
       }`}
diff --git a/src/components/translation-block.jsx b/src/components/translation-block.jsx
index 1af8b0e6..b83605e3 100644
--- a/src/components/translation-block.jsx
+++ b/src/components/translation-block.jsx
@@ -139,7 +139,7 @@ function TranslationBlock({
           ) : (
             !!translatedContent && (
               <>
-                <output class="translated-content" lang={targetLang}>
+                <output class="translated-content" lang={targetLang} dir="auto">
                   {translatedContent}
                 </output>
                 {!!pronunciationContent && (
diff --git a/src/index.css b/src/index.css
index 7002c099..b4b96ec0 100644
--- a/src/index.css
+++ b/src/index.css
@@ -90,6 +90,10 @@
   box-sizing: border-box;
 }
 
+[dir] {
+  text-align: start;
+}
+
 html {
   text-size-adjust: 100%;
 }