Fit content on 1378x768 device (follow up)

The previous commits broke support on Chrome / Safari on iOS.
`HTMLElement.scroll` does not seem to work when the height is set
as a percentage. This commit also uses `HTMLElement#scrollHeight`
instead of "offsetHeight".

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;

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]);