From 4146973cf659276a8251d85ad11dc34eb2f47beb Mon Sep 17 00:00:00 2001
From: 0x1eef <0x1eef@protonmail.com>
Date: Fri, 4 Oct 2024 11:33:57 -0300
Subject: [PATCH] Center-align surah content

---
 share/al-quran.reflectslight.io/CHANGELOG.txt |  4 ++++
 src/css/main/SurahStream.scss                 | 10 +++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/share/al-quran.reflectslight.io/CHANGELOG.txt b/share/al-quran.reflectslight.io/CHANGELOG.txt
index 1109811af..02d6a468d 100644
--- a/share/al-quran.reflectslight.io/CHANGELOG.txt
+++ b/share/al-quran.reflectslight.io/CHANGELOG.txt
@@ -2,6 +2,10 @@
 
 * vNEXT
 
+** Center-align ~ul.body.stream~
+For RTL languages we will show the content of a surah centered,
+and within a max width of 470px
+
 ** Render ~LanguageSelect.tsx~ items in an optimal font
 RTL languages have ~Cairo Regular~ applied.
 LTR languages have ~Kanit Regular~ applied
diff --git a/src/css/main/SurahStream.scss b/src/css/main/SurahStream.scss
index bab629ebf..bfaee6eb9 100644
--- a/src/css/main/SurahStream.scss
+++ b/src/css/main/SurahStream.scss
@@ -24,11 +24,15 @@ body .root .content.theme.rtl {
       @extend .font-amiri;
     }
   }
+
   ul.body.stream {
-    li.ayah p {
-      max-width: 470px;
-    }
+    display: flex;
+    flex-direction: column;
+    min-width: 470px;
+    max-width: 470px;
+    align-self: center;
   }
+
   /* <= $breakpoint-sm */
   @media (max-width: $breakpoint-sm) {
     ul.body.stream {