diff --git a/src/css/surah.scss b/src/css/surah.scss
index 55a29d5c0..5d67f72ee 100644
--- a/src/css/surah.scss
+++ b/src/css/surah.scss
@@ -77,11 +77,20 @@ body {
   ul.stream {
     clear: both;
     list-style-type: none;
-    height: 65%;
-    max-height: 400px;
+    height: 400px;
     padding: 0;
     overflow: hidden;
 
+    /* Height of 595px, or less */
+    @media screen and (max-height: 595px) {
+      height: 310px;
+    }
+
+    /* Height of 625px, or less */
+    @media screen and (max-height: 625px) {
+      height: 350px;
+    }
+
     li.ayah {
       span.surah-id.ayah-id {
         display: block;
diff --git a/src/js/components/TheQuran/Stream.tsx b/src/js/components/TheQuran/Stream.tsx
index c60331751..2cd9b3004 100644
--- a/src/js/components/TheQuran/Stream.tsx
+++ b/src/js/components/TheQuran/Stream.tsx
@@ -23,7 +23,7 @@ export function Stream({ surah, stream }: StreamProps) {
   useEffect(() => {
     const el: HTMLElement = document.querySelector("ul.stream");
     el.scroll({
-      top: el.offsetHeight * stream.length,
+      top: el.scrollHeight,
       behavior: "smooth",
     });
   }, [stream]);