From c23cf266b93224736a2f3d836273969d84d945b3 Mon Sep 17 00:00:00 2001
From: 0x1eef <0x1eef@protonmail.com>
Date: Fri, 23 Feb 2024 23:54:29 -0300
Subject: [PATCH] Set scroll-y on demand (SurahStream.tsx)

---
 src/css/pages/SurahStream.scss |  2 ++
 src/js/components/Stream.tsx   | 10 +++++++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/css/pages/SurahStream.scss b/src/css/pages/SurahStream.scss
index 3479528a7..7168831ac 100644
--- a/src/css/pages/SurahStream.scss
+++ b/src/css/pages/SurahStream.scss
@@ -14,6 +14,8 @@ body .root .content.theme {
 
   ul.body.stream {
     scrollbar-gutter: stable;
+    overflow: visible;
+
     li.ayah {
       padding: 10px 0 10px 0;
       span.title {
diff --git a/src/js/components/Stream.tsx b/src/js/components/Stream.tsx
index 0c80fc407..71a645641 100644
--- a/src/js/components/Stream.tsx
+++ b/src/js/components/Stream.tsx
@@ -23,12 +23,16 @@ export function Stream({
   isPaused,
   t,
 }: Props) {
-  const className = classNames("body", "stream");
-  const playState = endOfStream || isPaused ? "stopped" : "playing";
+  const className =
+    endOfStream || isPaused ? ["stopped", "scroll-y"] : ["playing"];
   const ref = useRef<HTMLUListElement>();
   const ul = useMemo<JSX.Element>(() => {
     return (
-      <ul lang={locale} className={classNames(className, playState)} ref={ref}>
+      <ul
+        lang={locale}
+        className={classNames("body", "stream", ...className)}
+        ref={ref}
+      >
         {stream.map((ayah: Quran.Ayah) => {
           return (
             <li key={ayah.id} className="ayah fade">