Fine-tune RTL layout

src/css/_base.scss

@@ -20,6 +20,7 @@ html {
     .rtl {
       font-family: "Mada Regular";
       direction: rtl;
+      line-height: 1.8;
     }
     .invisible, .hidden {
       display: none;

src/css/main/SurahStream.scss

@@ -19,14 +19,19 @@ body .root .content.theme {
 }
 
 body .root .content.theme.rtl {
+  /* <= $breakpoint-sm */
+  @media (max-width: $breakpoint-sm) {
+    ul.body.stream {
+      li.ayah p { width: 100%; }
+    }
+  }
   /* >= $breakpoint-xxl */
   @media (min-width: $breakpoint-xxl) {
     ul.body.stream {
-      $gap: 2rem;
+      margin-top: 4rem;
-      margin-top: $gap;
       li.ayah {
         font-size: larger;
-        margin-bottom: $gap;
+        margin-bottom: 2rem;
       }
     }
     footer {

src/js/components/SurahStream/Stream.tsx

@@ -25,7 +25,7 @@ export function Stream({ locale, surah, stream, endOfStream, isPaused, t }: Prop
         className={classNames(
           "body stream scroll-y list-none p-0 m-0 h-5/6",
           ...className,
-          { "mt-4": ltr, "mt-6": rtl },
+          { "mt-4": ltr, "mt-12": rtl },
         )}
         ref={ref}
       >
@@ -53,7 +53,9 @@ export function Stream({ locale, surah, stream, endOfStream, isPaused, t }: Prop
                   {t(locale, "of")} {formatNumber(locale, surah.ayat.length)}
                 </span>
               </span>
-              <p className="m-0">{ayah.body}</p>
+              <p className={classNames("m-0", { "w-96": locale.direction === "rtl" })}>
+                {ayah.body}
+              </p>
             </li>
           );
         })}