Further optimize layout for RTL languages

src/css/base/_icon.scss

@@ -88,9 +88,18 @@
   }
 
   footer {
+    .timer {
+      font-size: larger;
+    }
+    .sound-on.icon,
+    .sound-off.icon {
+      position: relative;
+      bottom: 5px;
+    }
     .sound-on.icon,
     .sound-off.icon,
     .play.icon {
+      display: inline-block;
       transform: rotate(180deg);
     }
   }

src/js/components/SurahStream/index.tsx

@@ -67,7 +67,7 @@ export function SurahStream({ surah, locale, t }: Props) {
         {!endOfStream && isPaused && <PlayIcon onClick={() => setIsPaused(false)} />}
         {!endOfStream && !isPaused && <PauseIcon onClick={() => setIsPaused(true)} />}
         <span
-          className={classNames("sound-box flex w-14 justify-end", {
+          className={classNames("sound-box flex flex-col items-end w-16", {
             hidden: endOfStream,
           })}
         >