Fixes for logical properties

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": [

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' : ''
       }`}

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 && (

src/index.css

@@ -90,6 +90,10 @@
   box-sizing: border-box;
 }
 
+[dir] {
+  text-align: start;
+}
+
 html {
   text-size-adjust: 100%;
 }